Как в Swiper изменить поведение параметра slidesPerGroup?

Question

Есть, например, 10 слайдов, параметр slidesPerView равен 4, slidesPerGroup тоже равен 4.

Когда изначально нажимаешь на кнопку "Вперед", то прокручиваются 4 слайда, потом те 2 слайда, которые остались.

Но если нажимаешь кнопку "Назад" (после того, как прокрутил все слайды и добрался к самому крайнему правому слайду), то сначала прокрутка происходит на то количество слайдов, которые в остатке (в данном случае 2), и только потом прокрутка осуществляется на то количество слайдов, как задано в параметре slidesPerGroup, то есть, на 4.

Как можно исправить подобное поведение?

То есть, чтобы при нажатии на кнопку "Назад" прокрутка всегда делалась на то количество слайдов, которое задано в параметре slidesPerGroup, а прокрутка на 2 слайда (те, которые в остатке) происходила в самом конце, но не в самом начале при первом нажатии на кнопку "Назад" с крайнего правого положения?

Пример в CodeSandbox

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 4,
  slidesPerGroup: 4,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper-container mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  </body>
</html>

БЛОГ НА HUSL

Как в Swiper изменить поведение параметра slidesPerGroup?

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