Как изменить количество видимых слайдов при достижении определённой ширины экрана?

Question

Есть слайдер от swiper с 4 слайдами, нужно, чтобы при достижении ширины 1250 он показывал один слайд (изначально 2). Не работает breakpoints, просто сразу один оставляет. Что делать?

var Swiper = new Swiper(".mySwiper3", {
slidesPerView: 2,
spaceBetween: 60,
breakpoints: {
    1250: {
        slidesPerView: 1,
        spaceBetween: 30
    },
},
pagination: {
    el: ".swiper-pagination",
    clickable: true,
    speed: 1000
},
speed: 1000,
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
},
});

Answer 1

В вашем коде по-умолчанию стоит значение slidesPerView: 2, что означает что минимальное кол-во слайдов будет всегда не менее 2. Возможное решение:

var swiper = new Swiper(".mySwiper3", {
  slidesPerView: 1,
  spaceBetween: 30,
  speed: 1000,

  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    // когда ширина экрана >= 1250px
    1250: {
      slidesPerView: 2,
      spaceBetween: 60
    }
  }
});

body {
  font-family: sans-serif;
}

.swiper {
  width: 90%;
  max-width: 1400px;
  height: 250px;
  margin: 50px auto;
  border: 1px solid #ccc;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.swiper-button-next,
.swiper-button-prev {
  color: #007aff;
}

.swiper-pagination-bullet-active {
  background: #007aff;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper Breakpoints Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>

<body>

  <h1>Swiper Breakpoints Demo</h1>
  <p>Измените ширину окна браузера. Меньше 1250px будет 1 слайд, а 1250px и больше, то будет 2 слайда.</p>

  <div class="swiper mySwiper3">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Слайд 1</div>
      <div class="swiper-slide">Слайд 2</div>
      <div class="swiper-slide">Слайд 3</div>
      <div class="swiper-slide">Слайд 4</div>
      <div class="swiper-slide">Слайд 5</div>
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>


</body>

</html>

БЛОГ НА HUSL

Как изменить количество видимых слайдов при достижении определённой ширины экрана?

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