Swiper:虚拟和循环不能一起工作

Question

codeLink: https://codepen.io/wuyangqin/pen/OJEeQBg

var swiper = new Swiper(".swiper-container", {
height: 400,
width: 240,
loop: true,
autoplay:{
delay: 2000
},
direction: 'vertical',
slidesPerView: 1,
centeredSlides: false,
spaceBetween: 30,
freeMode: true,
freeModeSticky: true,
mousewheel: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
scrollbar: {
el: ".swiper-scrollbar",
draggable: true,
dragSize: 40,
},
virtual: {
slides: (function() {
var slides = [];
for (var i = 0; i < 4; i += 1) {
slides.push(
'<img src="https://picsum.photos/600/600/?image=' +
(i + 1) +
'"/><p>' +
(i + 1) +
"</p>"
);
}
return slides;
})()
}
});

当我设置Loop:true时，Swiper将在到达终点时停止;我尝试了问题https://github.com/nolimits4web/swiper/issues/3070但仍然不工作

期望循环和虚拟一起工作

Answer 1

我有autoheight，我删除它，它为我工作。

<Swiper
direction="horizontal"
slidesPerView={1}
spaceBetween={30}
loop
speed={600}
className="mySwiper"
modules={[Virtual]}
virtual
style={{ width: '100vw', overflowX: 'hidden' }}
observer
observeParents
>
...
</Swiper>