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

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
        }
      }
    ]
  });
});

效果图

参考

github slick demo 源码