如何用文本替换Slick Slider中的圆点导航？

嘿，我来帮你搞定这个问题！你已经找对了核心方向——Slick Slider的customPaging配置项就是替换默认圆点导航的关键，只需要简单调整代码就能实现把data-title内容显示在导航里的需求。

实现思路 #

customPaging是一个回调函数，它会为每个分页项生成自定义的HTML内容：

1. 函数接收slider（滑块实例）和i（当前分页项的索引）两个参数
2. 通过$(slider.$slides[i])获取对应位置的幻灯片DOM元素
3. 用.data('title')提取该元素上的data-title属性值
4. 返回包含这个标题的HTML标签，作为自定义分页项

完整代码示例 #

HTML

<section class="slider">
  <div data-title="title1" data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png">
    <img src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png">
  </div>
  <div data-title="title2" data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png">
    <img src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png">
  </div>
  <div data-title="title3" data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png">
    <img src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png">
  </div>
  <div data-title="title4" data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png">
    <img src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png">
  </div>
  <div data-title="title5" data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png">
    <img src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png">
  </div>
  <div data-title="title6" data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png">
    <img src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png">
  </div>
</section>

CSS

.slider {
  width: auto;
  margin: 30px 50px 50px;
}
.slick-slide {
  background: #cee5ea;
  color: white;
  padding: 20px 0;
  font-size: 30px;
  font-family: "Arial", "Helvetica";
  text-align: center;
}
.slick-slide img {
  display: inline-block;
}
.slick-prev:before, .slick-next:before {
  color: black;
}
.slick-dots li {
  width: auto;
}
.pager__item {
  padding: 0 12px;
  display: block;
  border: 1px solid red;
  text-decoration: none;
  color: #333;
}
.pager__item:hover, .slick-active .pager__item {
  background-color: #efdfda;
}
.slick-dots {
  bottom: -40px;
}
.slick-slide:nth-child(odd) {
  background: #efdfda;
}

JavaScript（jQuery）

$(".slider").slick({
  dots: true,
  arrows: false,
  infinite: false,
  slidesToShow: 2,
  slidesToScroll: 2,
  customPaging : function(slider, i) {
    // 获取对应幻灯片的data-title值
    var title = $(slider.$slides[i]).data('title');
    // 返回包含标题的自定义分页项HTML
    return '<a class="pager__item">'+ title +'</a>';
  }
});

扩展小技巧 #

如果想要把data-thumb的缩略图也加到分页里，可以修改customPaging的返回内容，比如：

customPaging : function(slider, i) {
  var title = $(slider.$slides[i]).data('title');
  var thumb = $(slider.$slides[i]).data('thumb');
  return '<a class="pager__item"><img src="'+ thumb +'" alt="'+ title +'">'+ title +'</a>';
}

然后再调整CSS样式，让图片和标题排版更美观就可以啦~

内容的提问来源于stack exchange，提问作者Sébastien Imbert