swiper插件的简单使用
要想使用swiper插件首先去官网下载插件 https://www.swiper.com/.
需要用到的文件有swiper.min.js和swiper.min.css文件
html的内容
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</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>
导航等组件可以放在container之外
js中的内容
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项,如果不写就是水平
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable:true,//点击下面的分页器会跳到指定的图片
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
autoplay:{ //自动播放
delay:5000, //翻页的时间
disableOnInteraction: false
//操作之后自动播放会不会停止,默认是true
//stopOnLastSlide:默认值是false;
//如果设置为true,当切换到最后一个slide时停止自动切换。(loop模式下无效)
//写autoplay:true;相当于=>
/*autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},*/
}
})
</script>
</body>
修改样式
.swiper-container{
width: 100%;
height: 450px;
--swiper-theme-color: #ea413c;
/*设置分页器切换时的颜色 */
--swiper-navigation-color: #89898a;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
}
修改分页器的样式
.swiper-pagination span{
width: 16px;
height: 4px;
border-radius: 2px;
}
如果想要修改下一页和上一页的样式,比如加一个背景色
// An highlighted block
.swiper-button-prev{
background: #595959;
padding: 10px;
}
//下一页
.swiper-button-next{
background: #595959;
padding: 10px;
}