
本文介绍如何使用swiper.js制作漂亮小巧的轮播图效果。Swiper - 一款开源、免费、强大的触摸滑动插件,常用于移动端网站的内容触摸滑动
参数说明
pagination:使用分页器导航。分页器可使用小圆点样式(默认)、分式样式或进度条样式。
nextButton:用于指定前进按钮的CSS选择器或HTML元素。
prevButton:用于指定后退按钮的CSS选择器或HTML元素。
paginationClickable:此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
spaceBetween:在slide之间设置距离(单位px)。
centeredSlides:居中幻灯片。设定为true时,当前的active slide 会居中,而不是默认状态下的居左。
loop:设置为 true 则开启循环(loop)模式。
autoplay:设置为true启动自动切换。
autoplayDisableOnInteraction:用户操作swiper之后,是否禁止autoplay。默认为true:停止。
主要js与解析
<script> var swiper = new Swiper('.proimg .swiper-container', { pagination: '.proimg .swiper-pagination', //使用分页器导航。分页器可使用小圆点样式(默认)、分式样式或进度条样式。 nextButton: '.proimg .swiper-button-next', //用于指定前进按钮的CSS选择器或HTML元素。 prevButton: '.proimg .swiper-button-prev', //用于指定后退按钮的CSS选择器或HTML元素。 paginationClickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。 spaceBetween: 5, //在slide之间设置距离(单位px)。 centeredSlides: true, //居中幻灯片。设定为true时,当前的active slide 会居中,而不是默认状态下的居左。 loop: true, //设置为 true 则开启循环(loop)模式。 autoplay: 3500, //设置为true启动自动切换。 autoplayDisableOnInteraction: false //用户操作swiper之后,是否禁止autoplay。默认为true:停止。 }); </script>