Съезжают слайды при пролистывании назад

Рейтинг: 0Ответов: 1Опубликовано: 20.02.2023

Когда листаю слайды вправо все корректно отображается, но если листать назад, то слайды как будто съезжают в центр

let swiper = new Swiper(".popular-list", {
    slidesPerView: 4,
    spaceBetween: 40,
    slidesPerGroup: 4,
    loop: true,
    centeredSlides: 'true',
    grabCursor: 'true',
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-right-btn",
      prevEl: ".swiper-left-btn",
    },
  }

);
.popular>.wrap {
  max-width: 1288px;
}

.popular-list {
  margin: 64px 20px 0;
}

.popular-wrap {
  max-width: 1288px;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<div class="wrap swiper">
  <div class="popular-list">
    <div class="popular-wrap swiper-wrapper">
      <div class="popular-item swiper-slide">
      </div>
    </div>
  </div>
</div>

css javascript swiper.js
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Проблема, которую вы описали, может возникать из-за того, что при перелистывании слайдов в обратном направлении слайдер не всегда правильно определяет активный слайд, и поэтому происходит смещение.

Чтобы исправить эту проблему, вам нужно установить опцию centeredSlidesBounds для Swiper-экземпляра, как показано ниже:

let swiper = new Swiper(".popular-list", {
  slidesPerView: 4,
  spaceBetween: 40,
  slidesPerGroup: 4,
  loop: true,
  centeredSlides: true,
  centeredSlidesBounds: true, // добавляем эту опцию
  grabCursor: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-right-btn",
    prevEl: ".swiper-left-btn",
  },
});
.popular>.wrap {
  max-width: 1288px;
}

.popular-list {
  margin: 64px 20px 0;
}

.popular-wrap {
  max-width: 1288px;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<div class="wrap swiper">
  <div class="popular-list">
    <div class="popular-wrap swiper-wrapper">
      <div class="popular-item swiper-slide">
      </div>
    </div>
  </div>
</div>

Опция centeredSlidesBounds гарантирует, что активный слайд всегда будет находиться по центру контейнера слайдера, и это должно исправить проблему со смещением.

Кроме того, у вас есть две ошибки в коде: в строках centeredSlides: 'true' и grabCursor: 'true' вы используете строки вместо булевых значений. Чтобы исправить это, замените 'true' на true, как показано выше.