JS Fiddle: https://jsfiddle.net/zn3ex8bv/
let swiper = new Swiper("#albums_slider", {
direction: "horizontal",
spaceBetween: 30,
slidesPerView: 4,
loop: true,
allowTouchMove: false,
speed: 600,
autoplay: {
delay: 3000
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
По какой-то загадочной причине, когда я добавляю один слайд в слайдер, добавляются три слайда. Я еще ни разу не встречал такой баг со Swiper'ом.
В начале я подумал, что баг происходит из-за того, что параметр slidesPerView задан 4, но у меня только 1 слайд в Swiper'е. Так что я попробовал увеличить количество слайдов до 4, но это не сработал, в результате в слайдере 12 слайдов.
Что делать? Как решить эту проблему?
loop: true,
loop: true
, то всё ОК. А с чем может быть связано такое поведение?loop: true
стоит, значит нужна бесконечная прокрутка. Но при этом стоитslidesPerView: 4
, то есть надо показать 4 слайда. А где их взять? Правильно, показываем один несколько раз. 1 слайд - предыдущий, 2 слайд - текущий, 3 слайд - следуюущий.