FlexSlider 箭头工作但不可见
FlexSlider Arrows working but not visible
我尝试听从其他聊天室关于此问题的建议,但没有成功。我正在使用 Unbounce 并将所有代码从一个旧的着陆页复制到一个新的着陆页。一切正常,除了箭头不可见(但它们是可点击的,它们有效)。
到目前为止,我所做的只是移除箭头周围的框。
知道哪里出了问题吗?
Link to the old LP with working Flexslider
<style>
a {
text-decoration: none !important;
}
/*Testimonials slider*/
.testimonial-container {
background-color: transparent;
width: 100%;
}
.cd-testimonials-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 25px 0px 40px 0;
z-index: 1;
}
.testimonial-content {
max-width: 1000px;
width: 80%;
margin: 0 auto 30px auto;
}
.cd-testimonials {
color: rgba(130, 132, 139, 1);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.cd-testimonials > li {
position: absolute;
opacity: 0;
font-family: 'Fira Sans', sans-serif;
}
.cd-testimonials > li:first-child {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
line-height: 1.4;
margin-bottom: 30px;
padding: 0 14px;
font-size: 19px;
color: #284A6A;
}
.cd-author .cd-author-info {
display: inline-block;
vertical-align: top;
color: #0058A9;
font-size: 16px;
font-weight: 500;
text-align: center;
line-height: 1
}
ul.cd-author-info {
list-style: none;
}
ul.cd-author-info li span {
font-size: 14px;
line-height: 32px;
font-style: italic;
font-weight: 300;
color: #9c9c9c;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 50px;
height: 100%;
margin: 0px 0 0;
position: absolute;
z-index: 9999;
top: 0;
opacity: 1;
background: transparent;
cursor: default;
color: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-size: 52px;
font-family: Arial;
content: "\f053";
position: absolute;
display: block;
top: 50%;
cursor: pointer;
color: transparent;
padding: 14px 10px 14px 10px;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-control-paging li a {
width: 6px;
height: 6px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(2, 23, 31, 1);
cursor: default;
}
.flex-control-nav {
bottom: 30px;
position: absolute;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
.flex-control-nav li {
display: inline-block;
padding: 0px 5px 0px 5px;
}
/*Footer icons custom style*/
.footer-icons {
text-align: left;
}
.footer-icons a {
margin-right: 10px;
color: #fff;
}
@media screen and (max-width: 767px) {
.cd-author .cd-author-info {
line-height: 1.4;
}
.cd-author .cd-author-info {
font-size: 16px;
}
.testimonial-content p {
font-size: 16px;
}
.flex-direction-nav a {
width: 30px;
}
.flex-direction-nav a:before {
font-size: 30px;
}
.flex-direction-nav a:before {
padding: 14px 0px 10px 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
}
</style>
您丢失了 Font Awesome css,这是导航箭头所必需的。
添加
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
到 <head>
部分。 (就像工作页面一样,检查它的源代码行 2825)。祝你好运。
我尝试听从其他聊天室关于此问题的建议,但没有成功。我正在使用 Unbounce 并将所有代码从一个旧的着陆页复制到一个新的着陆页。一切正常,除了箭头不可见(但它们是可点击的,它们有效)。
到目前为止,我所做的只是移除箭头周围的框。
知道哪里出了问题吗?
Link to the old LP with working Flexslider
<style>
a {
text-decoration: none !important;
}
/*Testimonials slider*/
.testimonial-container {
background-color: transparent;
width: 100%;
}
.cd-testimonials-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 25px 0px 40px 0;
z-index: 1;
}
.testimonial-content {
max-width: 1000px;
width: 80%;
margin: 0 auto 30px auto;
}
.cd-testimonials {
color: rgba(130, 132, 139, 1);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.cd-testimonials > li {
position: absolute;
opacity: 0;
font-family: 'Fira Sans', sans-serif;
}
.cd-testimonials > li:first-child {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
line-height: 1.4;
margin-bottom: 30px;
padding: 0 14px;
font-size: 19px;
color: #284A6A;
}
.cd-author .cd-author-info {
display: inline-block;
vertical-align: top;
color: #0058A9;
font-size: 16px;
font-weight: 500;
text-align: center;
line-height: 1
}
ul.cd-author-info {
list-style: none;
}
ul.cd-author-info li span {
font-size: 14px;
line-height: 32px;
font-style: italic;
font-weight: 300;
color: #9c9c9c;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 50px;
height: 100%;
margin: 0px 0 0;
position: absolute;
z-index: 9999;
top: 0;
opacity: 1;
background: transparent;
cursor: default;
color: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-size: 52px;
font-family: Arial;
content: "\f053";
position: absolute;
display: block;
top: 50%;
cursor: pointer;
color: transparent;
padding: 14px 10px 14px 10px;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-control-paging li a {
width: 6px;
height: 6px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(2, 23, 31, 1);
cursor: default;
}
.flex-control-nav {
bottom: 30px;
position: absolute;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
.flex-control-nav li {
display: inline-block;
padding: 0px 5px 0px 5px;
}
/*Footer icons custom style*/
.footer-icons {
text-align: left;
}
.footer-icons a {
margin-right: 10px;
color: #fff;
}
@media screen and (max-width: 767px) {
.cd-author .cd-author-info {
line-height: 1.4;
}
.cd-author .cd-author-info {
font-size: 16px;
}
.testimonial-content p {
font-size: 16px;
}
.flex-direction-nav a {
width: 30px;
}
.flex-direction-nav a:before {
font-size: 30px;
}
.flex-direction-nav a:before {
padding: 14px 0px 10px 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
}
</style>
您丢失了 Font Awesome css,这是导航箭头所必需的。
添加
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
到 <head>
部分。 (就像工作页面一样,检查它的源代码行 2825)。祝你好运。