swiper.js学习笔记

写在前面

前面写过一篇关于swiper的笔记。之前那篇比较简单，测试的以为更多些。今天把它用在我的网站上，做了一个幻灯片效果，研究了几个参数，分享之。

代码解读

window.onload=function () {
   
        var mySwiper=new Swiper(".swiper-container",{
            pagination:".swiper-pagination",
            paginationClickable:true,
            autoplayDisableOnInteraction:false,
            loop:true,
            autoplay:1500,
            speed:1100
        });
    };

pagination是分页器，即幻灯片在播放时指示当前播放的位置的小圆点。这个参数的值即为class为“swiper-pagination”的div标签。
paginationClickable是分页器是否激活。默认是false，需要设置为true，才能在点击分页器时跳到指定页面。
loop为是否循环，控制当播放到最后一页时是否返回第一页重新循环。
autoplayDisableOnInteraction是在手动干扰幻灯片的自动播放后，它是否继续自动播放。需要设置为false才能有不论人是否干扰它的自动播放，在当前干扰结束后，它会继续自动向后播放。、
autoplay为自动播放，参数为每张幻灯片的停留时间。
speed为播放时的切换速度。

.swiper-container {
            margin:0;
            width: 100%;
            height: 500px;
}
.swiper-pagination-bullet-active{
            background-color: #fff;
}
img{
            position: relative;
            width: 100%;
            top:-100px;
            height:auto;
            opacity: 0.8;
}

设置.swiper-container是为了调整播放器在整个页面中的大小。
设置.swiper-pagination-bullet-active是修改分页器在激活状态下的颜色，默认是蓝色，我修改为白色。
将img的位置在播放器中调整。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="images/001.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/002.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/003.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/004.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/005.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/006.jpg" alt=""></div>
        <