本文介绍如何使用swiper.js制作一个全屏轮播效果,可以触摸滑动,左右切换自动播放。Swiper是一款开源、免费、强大的触摸滑动插件,常用于移动端网站的内容触摸滑动,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
主要js代码与说明
<script>
var swiper = new Swiper(".mySwiper", {
autoplay:true,// 自动播放
loop: true,// 循环模式选项
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
bulletActiveClass: 'my-bullet-active',
},
});
</script>