如何在flexslider中的controlNav上打印幻灯片编号

Question

我希望每个导航栏子弹点上的幻灯片编号

HTML代码

<div id="slideshow">
  <div class="container">
    <div class="flexslider showOnMouseover ">
      <ul class="slides">
        <li> <img src="sliders/images/1.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-1.png" alt=""></div></li>
        <li> <img src="sliders/images/2.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-2.png" alt=""></div></li>
      </ul>
    </div>

Answer 1

你可以通过删除一个类名

来做到这一点

在滑块启动后立即使用以下代码。

$('.flexslider').flexslider({
    start : function(){
        $('.flex-control-paging').removeClass('flex-control-paging');
    }
});

注意：您可能需要更改一些css以使其看起来很漂亮

Answer 2

任何人仍在寻找解决方案，只需修改样式表“ flexslider.css”即可解决。

该脚本已经为每个导航链接提供了一个数字，但是使用-9999px的文本缩进从视图中隐藏了该数字。要获取数字，请修改类“ .flex-control-paging li a”。例如，这是原始内容：

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  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 {
  width: 20px;
  height: 20px;
  font-size: 20px;
  display: block;
  background: #ddd;
  cursor: pointer;
}

还有...

.flex-control-paging li a:hover {
  background: #333;
  color:#eee;
}
.flex-control-paging li a.flex-active {
  background: #333;
  color:#FFF;
  cursor: default;
}

应该为您添加自己的样式提供一个很好的起点。