swiper.js学习笔记

最新推荐文章于 2024-08-19 12:12:08 发布

chenqiong1991

最新推荐文章于 2024-08-19 12:12:08 发布

阅读量1.8k

点赞数

分类专栏：学习笔记文章标签： pagination swiper-js

本文链接：https://blog.csdn.net/chenqiong1991/article/details/69049673

版权

本文是作者关于Swiper.js的进一步学习笔记，重点解析了pagination分页器的设置，包括paginationClickable、loop、autoplayDisableOnInteraction等关键参数的功能，并介绍了如何自定义分页器样式和调整幻灯片播放速度。此外，提到了autoplay自动播放功能的详细配置，并预告了后续将分享使用bootstrap实现的导航条和响应式页面的内容。

摘要由CSDN通过智能技术生成

写在前面

前面写过一篇关于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>
        <