用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%;
}