jquery - Flexslider 箭头落在带有额外空白的幻灯片下方

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(即分页)，你可以为 flex-direction 添加 display:none -nav (viz for prev-next button) 你可以编辑它的 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;
 }

它会移除空白并将 navs 定位到您想要的位置。