Question

我正在使用flexslider 2（基本风格）。左箭头和右箭头显示正确，但图像底部的导航按钮未显示。我已经在这里并通过Google寻求解决方案，但我只能找到与侧导航箭头（工作正常）相关的答案，而不是下面的按钮

在head标签中我添加了controlNav: true，但它没有任何区别：

<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    controlNav: true,
    animation: "slide"
  });
});
</script>

并且flexslider.css具有：

.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

我尝试将bottom: -40px;更改为bottom: -100px;，认为导航按钮可能隐藏在图像下方，但这也没有任何区别。

我已经检查过字体文件是否在正确的位置，实际上它们必须是，否则箭头不会显示，但我看不出为什么点不显示。我相信这样做会很简单我做错了。

Answer 1

尝试更改为：

.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
}

或从overflow: hidden

中删除.flexslider

底部的Flexslider导航按钮未显示

1 个答案: