Question

我将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;
}

Answer 1

由于您未使用flex-control-nav（即分页），您可以为display:none（即上一个下一个按钮）进一步添加flex-direction-nav，您可以对其进行编辑{ {1}}至于纵向中间位置：

CSS

对于.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; }定位在您想要的位置。

Flexslider箭头位于幻灯片下方的额外空白区域

1 个答案: