Swiper Slider Можно ли при определенном разрешений экрана отключить слайдер?

Question

Например от min-width: 992px слайдер отключить, при max-width: 991px включить слайдер. Вы не в курсе есть такая возможность у слайдера. В документаций не нашел, возможно плохо искал

Answer 1

Один из вариантов - использование watchOverflow - При включении Swiper будет отключен и будет скрывать кнопки навигации, если слайдов недостаточно для скольжения. При этом следует иметь ввиду, что функционал слайдера будет отключен, если все слайды поместятся в область просмотра (992px)

const slider = new Swiper(".container .swiper-container", {
  init: false,
  spaceBetween: 0,
  watchOverflow: true,
  pagination: {
    el: ".swiper-pagination",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  scrollbar: {
    el: ".swiper-scrollbar",
  },
  breakpoints: {
    320: {
      slidesPerView: 1,
    },
    600: {
      slidesPerView: 2,
    },
    992: {
      slidesPerView: "auto",
    },
  },
  on: {
    init: function() {
      toggleWidth();
    },
    resize: function() {
      toggleWidth();
    },
  },
});

slider.init();

function toggleWidth(e) {
  const fieldValueWidth = document.querySelector(".valueWidth");
  fieldValueWidth.innerText = window.innerWidth + " px";
}

body {
  margin: 0;
}

.swiper-container {
  width: 100%;
}

.swiper-wrapper {
  flex-wrap: nowrap;
  max-width: 100%;
  margin: 0 auto;
}

.swiper-slide {
  text-align: center;
  background: #efefef;
  padding: 25px 0;
  height: 40vh;
  overflow: hidden;
}

.swiper-slide img {
  width: 20%;
}

.swiper-slide:nth-child(1) {
  background-color: #eee;
}

.swiper-slide:nth-child(2) {
  background-color: #6332f6;
}

@media screen and (min-width: 991px) {
  .swiper-slide {
    /* отнимаем margin, установленный для слайда */
    flex: 1 1 33.33%;
    max-width: 33.33%;
    box-sizing: border-box;
  }
}

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

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>

<body>
  ширина = <span class="valueWidth"></span>
  <div class="container">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://swiperjs.com/i/logo.svg" alt="Swiper Slider" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/i/logo.svg" alt="Swiper Slider" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/i/logo.svg" alt="Swiper Slider" />
        </div>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

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

</html>

Answer 2

Я лично рядом со slider-container написал div, в который запихнул точно тоже самое, что лежит в слайдере а после, через медиазапрос slider-container{display:none}

const swiper = new Swiper(".swiper-container",{
  loop:true
    })

body{
  text-align:center;
}
.swiper-container{
  width:100%;
}
.container{
  display:none;
}
@media(min-width:777px){
  .swiper-container{
    display:none;
  }
  .container{
    display:flex;
    justify-content:space-around;
  }
}

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<body>
<div class = "swiper-container">
  <div class = "swiper-wrapper">
  <div class = "swiper-slide">
    <img src="#"alt="картинка1">
    </div>
    <div class = "swiper-slide">
    <img src="#"alt="картинка2">
    </div>
    </div>
 </div>
  
  <div class = "container">
    <div class = "slide">
    <img src="#"alt="картинка1">
    </div>
    <div class = "slide">
    <img src="#"alt="картинка2">
    </div>
   </div>
  
  
  </body>  
  
   <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Answer 3

breakpoints: { 320: { enabled: false, }, 768: { enabled: true, } }

БЛОГ НА HUSL

Swiper Slider Можно ли при определенном разрешений экрана отключить слайдер?

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