Как отключить пролистывание на swiper js по условию?

Question

Имеется swiper js каким образом можно менять параметры по ходу работы. В данном случае мне нужно параметр `` отключать если все слайды влезают в контейнер и включать если нет.

const sounds = new Swiper('.sounds .tabs-list', {
    init: false,
    slidesPerView: 'auto',
    spaceBetween: 30,
    allowTouchMove: true,
});

sounds.on('init resize', () => {
    const tabs = sounds.el.querySelectorAll('.tabs-list__item');
    const widthSoundsTabs = [...tabs].reduce((total, tab) => total + tab.offsetWidth, 0) + (sounds.params.spaceBetween * (tabs.length - 1));

    if( widthSoundsTabs > sounds.el.offsetWidth && !sounds.params.allowTouchMove) {
        sounds.params.allowTouchMove = true;
    } 

    if(widthSoundsTabs <= sounds.el.offsetWidth && sounds.params.allowTouchMove) {
        sounds.params.allowTouchMove = false;
    }
});

sounds.init();

Параметр меняется, но никакой реакции, точнее слайдер как реагировал на свайп мышью или пальцем так и реагирует

Answer 1

Вам правильно подсказал #NeedHate: использование watchOverflow - позволит отключать слайдер и скрывать навигационные кнопки на случай, если слайдов недостаточно для скольжения.

Таким образом, вам нужно включить параметр: watchOverflow: true. И после манипуляций с элементами DOM, вложенными в слайдер, нужно, запустить метод update() - который обновит всю функциональность слайдера с учетом новых параметров вложенных элементов DOM.

Пример: нажимайте кнопку для искусственного изменения ширины слайдера, чтобы увидеть как это работает

const sounds = new Swiper('.sounds .tabs-list', {
  init: false,
  slidesPerView: 'auto',
  spaceBetween: 15,
  watchOverflow: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  }
});

sounds.init();

$btn = document.querySelector('.toggleWidth');
$btn.addEventListener("click", toggleWidth);

function toggleWidth() {
  $slides = document.getElementsByClassName("swiper-slide");
  console.log($slides);
  for (var i = 0; i < $slides.length; i++) {
    console.log($slides[i], $slides[i].style.width)
    if ($slides[i].style.width === "auto") {
      $slides[i].style.width = "250px";
    } else {
      $slides[i].style.width = "auto";
    }
    sounds.update();
  }
}

toggleWidth();

.swiper-container {
  width: 600px;
  max-width: 600px;
  margin-top: 15px;
  font-size: 15px;
  font-family: arial;
}

.swiper-slide {
  background: #efefef;
  padding: 15px;
  height: 100%;
}

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

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

<body>
  <!-- Slider main container -->
  <p>
    Нажмите кнопку, чтобы изменить ширину слайдов и просмотреть результат
  </p>
  <button class="toggleWidth">toggleWidthSlide</button>
  <div class="sounds">
    <div class="swiper-container tabs-list">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <h1>Slide 1</h1>

        </div>
        <div class="swiper-slide">
          <h2>Slide 2</h2>

        </div>
        <div class="swiper-slide">
          <h3>Slide 3</h3>

        </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>

      <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>
  </div>
  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как отключить пролистывание на swiper js по условию?

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