slick.js jquery自适应幻灯片插件-BFW插件库

slick.js jquery自适应幻灯片插件

特性：

支持响应式
浏览器支持 CSS3 时，则使用 CSS3 过度/动画
支持移动设备滑动
支持桌面浏览器鼠标拖动
支持循环
支持左右控制
支持动态添加、删除、过滤
支持自动播放、圆点、箭头、回调等等

使用方法：

第一步引入bfwone 加载依赖项jquery

第二步执行插件代码

 bready(function() {
            use(["slick.min", "slick.min|slick-theme.min"], function() {
                $('.slider').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

easingfade: 布尔值 false 淡入淡出

arrows: 布尔值 true 左右箭头

infinite: 布尔值 true 循环播放

lazyLoad: 字符串 ‘ondemand’ 延迟加载，可选 ondemand 和 progressive

onBeforeChange(this, index) methodnull 开始切换前的回调函数

onAfterChange(this, index) methodnull 切换后的回调函数

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 垂直方向

方法:

1.slick():初始化 slick

2.unslick(): 销毁 slick

3.slickNext():切换下一张

4.slickPrev():切换上一张

5.slickPause():暂停自动播放

6.slickPlay():开始自动播放

7.slickGoTo()index : int切换到第 x 张

8.slickCurrentSlide():返回当前幻灯片索引

完整示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["slick.min", "slick.min|slick-theme.min"], function() {
                $('.slider').slick({
                    dots: true
                });
            });
        });
    </script>
</head>
<body>

    <div class="slider" style="height:400px;">
        <div class="item">
            <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" />
        </div>
        <div class="item">
            <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" />
        </div>
        <div class="item">
            <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" />
        </div>
        <div class="item">
            <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" />
        </div>
    </div>



</body>
</html>

slick.js jquery自适应幻灯片插件

网友评论0

zturn.js

PicCarousel.js

jquery.flipster.js

SliceBox.js

slideBox.js

slick.js

bxslider.js

caroursel.js

windy.js

impress.js