CSS Slick JS 加载滑块跳转

简介

CSS Slick JS 是一个用于轮播图和滑块的 jQuery 插件，通过各种配置选项可以实现多种设置效果，包括滑块跳转。

安装

<!-- 在 head 中引入 jQuery 和 slick 样式文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- 在 body 中引入 slick js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

使用

1. 基本配置

<!-- 在 HTML 中创建轮播图容器 -->
<div class="slider">
  <div><img src="img1.jpg"></div>
  <div><img src="img2.jpg"></div>
  <div><img src="img3.jpg"></div>
</div>

<!-- 在 JS 中进行配置和初始化 -->
<script>
$(document).ready(function(){
  $('.slider').slick({
    autoplay: true, // 是否自动播放
    arrows: true, // 是否显示左右箭头
    dots: true // 是否显示小圆点
  });
});
</script>

2. 滑块跳转

在轮播图容器中添加 data-index 属性，然后在 JS 中监听 beforeChange 事件并滑块跳转到当前元素的 data-index。

<!-- 在 HTML 中创建轮播图容器 -->
<div class="slider">
  <div data-index="1"><img src="img1.jpg"></div>
  <div data-index="2"><img src="img2.jpg"></div>
  <div data-index="3"><img src="img3.jpg"></div>
</div>

<!-- 在 JS 中监听 beforeChange 事件并滑块跳转 -->
<script>
$(document).ready(function(){
  $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var index = $(slick.$slides[nextSlide]).data('index');
    slick.slickGoTo(index-1); // 滑块跳转到当前元素的 data-index
  });
  
  $('.slider').slick({
    autoplay: true, // 是否自动播放
    arrows: false, // 隐藏左右箭头
    dots: false, // 隐藏小圆点
    speed: 500 // 滑块跳转速度
  });
});
</script>

结语

CSS Slick JS 是一个功能强大的 jQuery 插件，可以轻松创建漂亮而灵活的轮播图和滑块效果。滑块跳转功能在双向绑定程序中特别实用，通过本文提供的示例代码您可以轻松实现滑块跳转效果。