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();