Swiper.js实现无缝滚动

1. 引入Swiper.js

 

其他获取方式

通过NPM获取Swiper

$ npm install swiper

swiper.js下载路径:下载Swiper - Swiper中文网Swiper各版本的下载地址,Swiper百度网盘下载https://www.swiper.com.cn/download/index.html

2. 在HTML文件中加入无缝滚动的图片

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.效果如下:

演示效果(图片来源网络)

你可能感兴趣的:(javascript,前端,html)