swiper.js样式及手动滑动后自动轮播失效问题

用swiper4.0+来实现这种效果的轮播图,之前写了大量的CSS样式才搞成这种效果,现在从网上搜了一堆配置才配置好,同时遇到了手动滑动后自动轮播失效的问题,在这里记录一下

swiper= new Swiper('.swiper-container', {
      roundLengths : true, 
      initialSlide :2,
      speed:600,
      slidesPerView:"auto",
      centeredSlides : true,
      followFinger : false,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false, //设置为false时手动滑动后轮播不会失效
      },
      spaceBetween : 10,
      loop:true
    })

然后再设置下swiper-slide的宽度就OK了

.swiper-slide {
   width: 85%;
}
.swiper-slide img{
   width: 100%;
}

猜你喜欢

转载自blog.csdn.net/weixin_41587194/article/details/101455750