Swiper.js实现无缝滚动
swiper.js实现无缝滚动
·
1. 引入Swiper.js
<script src="/static/swiper/swiper-bundle.min.js"></script>
其他获取方式
通过NPM获取Swiper
$ npm install swiper
swiper.js下载路径:下载Swiper - Swiper中文网Swiper各版本的下载地址,Swiper百度网盘下载https://www.swiper.com.cn/download/index.html
2. 在HTML文件中加入无缝滚动的图片
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide slide-item" >
<img src="/static/images/img(1).jpg">
<img src="/static/images/img(2).jpg">
<img src="/static/images/img(3).jpg">
<img src="/static/images/img(4).jpg">
<img src="/static/images/img(5).jpg">
<img src="/static/images/img(6).jpg">
</div>
</div>
</div>
3.js中设置滚动效果
var mySwiper = new Swiper('.swiper', {
slidesPerView: 'auto',
speed: 10000, //滚动速度
freeMode: true,
loop: true,
autoplay: {
delay: 0,
disableOnInteraction: false, //就算触摸了也继续滚动
loopPreventsSlide: true,
},
paginationClickable: true
})
如果想要实现鼠标移入滚动暂定,鼠标离开继续滚动:
$('.swiper').on('mouseenter', function(e){
mySwiper.stopAutoplay();
})
$('.swiper').on('mouseleave', function(e){
mySwiper.startAutoplay();
});
4.效果如下:
演示效果(图片来源网络)
更多推荐
已为社区贡献5条内容
所有评论(0)