Slick 图片左右滑动幻灯片效果

最新推荐文章于 2025-09-05 05:19:46 发布

原创最新推荐文章于 2025-09-05 05:19:46 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#幻灯片插件 #slick #左右滑动效果 #jquery插件 #图片切换

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用slick jQuery插件创建响应式的幻灯片展示，包括其特点、使用方法和代码示例。适用于移动设备和平面浏览器，支持多种交互和配置选项。

slick 是一个可以实现幻灯片效果的 jquery 插件。

具有以下特点：
* 支持响应式
* 浏览器支持 CSS3 时，则使用 CSS3 过度/动画
* 支持移动设备滑动
* 支持桌面浏览器鼠标拖动
* 支持左右控制
* 支持动态添加、删除、过滤
* 支持自定义滑动按钮
* 支持自动播放、圆点、箭头、回调等等

使用方法

引入文件

<script type="text/javascript" src="../src/js/jquery.js"></script>
<link rel="stylesheet" href="../src/css/slick/slick.css">
<link rel="stylesheet" href="../src/css/slick/slick-theme.css">

<script type="text/javascript" src="../src/js/slick.min.js"></script>

HTML

<div class="slider" data-slick='{"slidesToShow": 3, "slidesToScroll": 3}'>
  <div>
    <img src="../src/images/photo.jpeg" />
    <span class="title">Picture1</span>
  </div>
  <div>
    <img src="../src/images/photo.jpeg" />
    <span class="title">Picture2</span>
  </div>
  <div>
    <img src="../src/images/photo.jpeg" />
    <span class="title">Picture3</span>
  </div>
  <div>
    <img src="../src/images/photo.jpeg" />
    <span class="title">Picture4</span>
  </div>
</div>

JavaScript

$(function(){
  $(".slider").slick({
    dots: true, 
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});