如何在 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

您可以通过删除 class 名称来做到这一点

使用下面的代码在滑块启动后立即执行此操作。

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

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

Answer 2

任何人仍然像我一样寻找解决方案，只需修改样式即可解决 sheet 'flexslider.css'.

该脚本已经为每个导航 link 提供了一个数字，但使用 -9999 像素的文本缩进从视图中隐藏了该数字。要取回数字，请修改 class '.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;
}

应该给你一个很好的起点来添加你自己的风格。

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

how to print slide number on controlNav in flexslider

javascript

slider

flexslider