Molerose

推荐一个好用的图片滚动插件 - Slick
一个基于 jQuery 的幻灯片插件,样式可自定,支持响应式,支持移动设备滑动,支持桌面浏览器鼠标拖动,支持自动播...
扫描右侧二维码阅读全文
14
2018/06

推荐一个好用的图片滚动插件 - Slick

一个基于 jQuery 的幻灯片插件,样式可自定,支持响应式,支持移动设备滑动,支持桌面浏览器鼠标拖动,支持自动播放、圆点、箭头、回调等等...


浏览器兼容:兼容 IE7+ 及其他主流浏览器,若要兼容 IE7,需修改 CSS(slick.css)。

jQuery兼容:兼容 1.7 及以上版本。

官方地址 | 开发作者 | 文档参考


引入文件(CDN)

/* Slick主题层叠样式表 */
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/slick-carousel/1.8.1/slick.min.css"/>

/* Slick底部脚本库调用,建议调用在HTML文档底部 */
<script src="//cdn.bootcss.com/slick-carousel/1.8.1/slick.min.js"></script>

插件布局方式

<div class="slick-box">
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
</div>

脚本编写

$(function(){
    $('.slick').slick({
        dots: true
    });
});

参数目录

参数 类型 默认值 说明
accessibility 布尔值 true 启用Tab键和箭头键导航
autoplay 布尔值 false 自动播放
autoplaySpeed 整数 3000 自动播放间隔
centerMode 布尔值 false 中心模式
centerPadding 字符串 '50px' 中心模式左右内边距
cssEase 字符串 'ease' CSS3 动画
customPaging function n/a 自定义分页
dots 布尔值 false 指示点
draggable 布尔值 true 启用桌面拖动
easing 字符串 'linear' animate() fallback easing
fade 布尔值 false 淡入淡出
arrows 布尔值 true 左右箭头
infinite 布尔值 true 循环播放
lazyLoad 字符串 'ondemand' 延迟加载,可选 ondemand 和 progressive
onBeforeChange(this, index) method null 开始切换前的回调函数
onAfterChange(this, index) method null 切换后的回调函数
onInit(this) method null 第一次初始化后的回调函数
onReInit(this) method null 再次初始化后的回调函数
pauseOnHover 布尔值 true 鼠标悬停暂停自动播放
responsive object null 断点触发设置
slide 字符串 'div' 滑动元素查询
slidesToShow 整数 1 幻灯片每屏显示个数
slidesToScroll 整数 1 幻灯片每次滑动个数
speed 整数 300 滑动时间
swipe 布尔值 true 移动设备滑动事件
touchMove 布尔值 true 触摸滑动
touchThreshold 整数 5 滑动切换阈值,即滑动多少像素后切换
useCSS 布尔值 true 使用 CSS3 过度
vertical 布尔值 false 垂直方向

响应式设置用例 - responsive

$(function(){
    $('.slick-box').slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      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
          }
        }
      ]
    });
})

滑块同步

<div class="slider-for">
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
</div>
<div class="slider-nav">
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
    <div><a href=""><img src="images/xxx.jpg" alt=""></a></div>
</div>
$(function(){
     $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: true,
      centerMode: true,
      focusOnSelect: true
    });    
})
Last modification:June 15th, 2018 at 08:58 pm
If you think my article is useful to you, please feel free to appreciate

2 comments

  1. 一朵时光红

    好文章,值得关注和欣赏!

  2. 太阳黑子

    人生何处不相逢

Leave a Comment