轮播图插件swiper的使用

1.引入（必需*）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

2.html结构

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/b1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/b2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/b3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/b2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/b1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/b3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/b1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/b2.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>

3.JavaScript
（具体API可以参考Swiper中文网）

<script type="text/javascript">
        var mySwiper = new Swiper('.swiper-container', {
            // 滚动方向 horizontal/vertical
            direction: 'horizontal',
            // 自动播放
            autoplay: 2000,
            // 是否循环播放
            loop: true,
            // 如果需要分页器（小圆点）
            // 是否需要分页器

            pagination: {
                el: '.swiper-pagination',
                paginationClickable: true,
            },
            // 点击分页器是否切换到对应的图片 是 true 否 false


            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
            // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
            // 操作包括触碰，拖动，点击pagination等。
            autoplayDisableOnInteraction: false,

        })
    </script>

4.css
(有的时候需要定义轮播的大小，或图片太大，也是需要定义大小。这里是根据我照片大小定义的.)

 <style type="text/css">
        .swiper-container {
            width: 1440px;
            height: 550px;
        }
        
        img {
            width: 1440px;
            height: 550px;
        }
    </style>

demo所用图片：

demo图片.png