我将 Flexslider2 插入我的网站,但由于某种原因,箭头一直向下落到底部,导致照片底部出现一条空白区域。我已经多次将下载的代码替换回原始代码,但这个问题一直在发生。你可以在http://charvinedesign.com/bvd/看到它如果有人可以帮我解决这个问题,我将不胜感激?我在这上面花了太多时间。
HTML
<div class="flexslider">
<ul class="slides">
<li><img src="images/slider/bvd001.jpg" alt="Bear Valley Derby & Country Faire" /></li>
<li><img src="images/slider/bvd002.jpg" alt="Bear Valley Derby & Country Faire"/></li>
<li><img src="images/slider/bvd003.jpg" alt="Bear Valley Derby & Country Faire"/></li>
<li><img src="images/slider/bvd004.jpg" alt="Bear Valley Derby & Country Faire"/></li>
<li><img src="images/slider/bvd005.jpg" alt="Bear Valley Derby & Country Faire"/></li>
<li><img src="images/slider/bvd006.jpg" alt="Bear Valley Derby & Country Faire"/></li>
</ul>
</div>
CSS
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-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-family: "flexslider-icon";
font-size: 40px;
display: inline-block;
content: '\f001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f002';
}
.flex-direction-nav .flex-prev {
left: -50px;
}
.flex-direction-nav .flex-next {
right: -50px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 0.7;
right: 10px;
}
.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-nav
(即分页),你可以为 flex-direction 添加
(viz for prev-next button) 你可以编辑它的 display:none
-navCSS
作为它垂直居中的位置:
.flex-direction-nav {
margin: 0px auto;
text-align: center;
width: 100%;
left: 0px;
right: 0px;
position: absolute;
top: 40%;
height: 50px;
}
对于 nav-arrows
,您还必须为它们编写 CSS
。
就像:
.flex-nav-prev {
position: absolute;
top: 25px;
left: -15px;
}
.flex-nav-next {
position: absolute;
top: 25px;
right: -10px;
}
它会移除空白并将 navs
定位到您想要的位置。
关于jquery - Flexslider 箭头落在带有额外空白的幻灯片下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31847969/