自适应图片轮播slick.js
17 1 503 0


jquery slick.js

主要优点:

1、自适应屏幕

2、支持手机端手指滑动

3、无限循环

4、支持自动播放、圆点、箭头

5、支持根据屏幕大小显示箭头和原点

6、支持动态添加、删除、过滤

......


简单示例


需要引入jquery


引入slick

<link href="css/slick.css" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>	
<script src="js/slick.min.js"></script>	


hmtl代码

<div class="banner-slide">
    <div>
	 <img src="images/banner1.jpg" alt="">
    </div>
    <div>
	 <img src="images/banner2.jpg" alt="">
    </div>
    <div>
	 <img src="images/banner3.jpg" alt="">
    </div>
</div>


js代码

function mainSlider() {
        var BasicSlider = $('.banner-slide');
        BasicSlider.slick({
            autoplay: false,
            autoplaySpeed: 5000,
            dots: true,
            fade: true,
            arrows: true,
            prevArrow: '<span class="prev"><i class="fa fa-angle-left"></i></span>',
            nextArrow: '<span class="next"><i class="fa fa-angle-right"></i></span>',
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        arrows: false//屏幕大于768px才显示箭头
                    }
                },
            ]
        });
    }
mainSlider();




评论(0) 帮助他人、分享经验 我要评论
上传时间: 2020-04-09
分类: 代码 插件
文件大小: 1.2 MB
收藏
下载
有侵犯版权请及时联系我们,我们将在24小时内删除素材。
投诉举报
请在Safari浏览器下载