swiper
参考资料:https://www.swiper.com.cn/
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
使用
1》首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件
2》先把dom元素赋值
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="3.jpg" alt="">
</div>
</div>
<dclass="swiper-pagination"div>
<!-- 分页器 -->
<dclass="swiper-button-prev"div>
<!--左箭头。如果swiper-container外面,需要样式。-->
<dclass="swiper-button-next"div>
<!--右箭头。如果swiper-container外面,需要样式。-->
</div>
3》初始化swiper
new Swiper(’.swiper-container’)
4》设置功能(参数)
{
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
type:'progressbar'
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
}
可根据实际需要查阅文档