现在大家在做手机H5时经常到用到需要手动或自动滑动显示内容,之前多用轮播图的方式,但是比起可以由用户手动控制的方式显示体验上差不了不少。现在正好用到Swiper,在此分享个小例子供大家参考,如果想了解更多关于Swiper的应用,可查看官网https://www.swiper.com.cn
使用时首先需要下载库并引入,下载地址:https://www.swiper.com.cn/download/index.html
<script type="text/javascript">
$(function () {
//轮播图
var swiper = new Swiper('.swiper-container-top', {
loop:true,//开启无限循环
autoplay: {
delay: 3000,//停留秒数
stopOnLastSlide: false,
disableOnInteraction: false,
},
speed: 300,//滚动速度
pagination: {
el: '.swiper-pagination-top',
},
});
})
</script>
CSS样式