Swiper Slider не слистается вправо

Question

На данном сайте https://novgodent.ffox.site/ инициализировал несколько слайдеров на странице. И слайдеры вправо листаются до упора, хотя прописано свойство loop.

Инициализировано всё таким образом:

   var swiperProduct1 = new Swiper(".product-slider1", {
        slidesPerView: 2,
        loop: true,
        spaceBetween: 10,
         breakpoints: {
          576: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 40,
          }
        },
        navigation: {
          prevEl: ".product-arrow-left1",
          nextEl: ".product-arrow-right1",
        },
        
      });

      var swiperProduct2 = new Swiper(".product-slider2", {
        slidesPerView: 2,
        loop: true,
        spaceBetween: 10,
         breakpoints: {
          576: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 40,
          }
        },
        navigation: {
          prevEl: ".product-arrow-left2",
          nextEl: ".product-arrow-right2",
        },
        
      });


      var swiperProduct3 = new Swiper(".product-slider3", {
        slidesPerView: 2,
        loop: true,
        spaceBetween: 10,
         breakpoints: {
          576: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 40,
          }
        },
        navigation: {
          prevEl: ".product-arrow-left3",
          nextEl: ".product-arrow-right3",
        },
        
      });

Как исправить слайдер, чтобы он листался вправо?

Answer 1

Это проблема появилась в обновленной версии swiper. Там перестроена логика Loop Mode. Режим Loop был полностью переработан в версии 9, и теперь вместо дублирования слайдов он динамически перестраивает текущие.

Количество слайдов в циклическом режиме должно быть как минимум в 2 раза больше значения slidesPerView.

Вот такое решение есть. Но не всем думаю подойдет. loop: true, rewind: true,

То есть если слайдеров больше в 2 раза чем slidesPerView, будет бесконечность нормально работать. Если же слайдов меньше, по достижению последнего слайда, перекидывает на первый. Но пагинация не правильно отрабатывает. В общем беда какая то с этим Swiper

Answer 2

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  loop: true,

  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
  },

  pagination: {
    el: '.swiper-pagination',
  },

  speed: 1500,

});

БЛОГ НА HUSL

Swiper Slider не слистается вправо

Ответы (2 шт):