slidesPerView: 'auto'
与
spaceBetween: 20
属性一起使用,但Swiper 每个视图仅显示一张幻灯片。 我想在第一张幻灯片之后显示下一张幻灯片,即使它会被文档宽度剪切。
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
loop: false,
slidesPerView: 3,
spaceBetween: 40,
navigation: {
prevEl: '.slider .prev-btn',
nextEl: '.slider .next-btn',
},
breakpoints: {
1200: {
slidesPerView: 'auto',
spaceBetween: 40,
},
830: {
slidesPerView: 'auto',
spaceBetween: 10, // <- doesn't work
}
}
});
});
但它每个视图仅显示一张幻灯片,并忽略选项中设置的空间。
如何严格设置幻灯片之间的间距?
slidesPerView: 'auto'
,使用这个
breakpoints: {
"@0.00": {
slidesPerView: 1,
},
"@0.75": {
slidesPerView: 2,
},
"@1.00": {
slidesPerView: 3,
},
"@1.50": {
slidesPerView: 4,
},
我通过在包装器上添加
slidesPerView:'auto'
属性和在幻灯片上添加 CSS
width: fit-content;
解决了这个问题。
<Swiper slides-per-view="auto" :space-between="10">
<SwiperSlide class="w-fit">
...
</SwiperSlide>
</Swiper>