本文介绍如何使用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>