1

Имеется 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();

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

5
  • после смены значения для allowTouchMove нужно запустить новую инициализацию, для этого добавьте строку sounds.reInit() 7 фев 2020 в 9:24
  • 1
    watchOverflow: true. Если не будет нужного количества слайдов - то не будет слайдер и инициализироваться.
    – NeedH8
    7 фев 2020 в 9:28
  • @ЕвгенийНиколаев в доке такого метода нет swiperjs.com/api 7 фев 2020 в 9:57
  • @NeedHate не получится так, количество слайдов не фиксированное и они разной ширины 7 фев 2020 в 9:58
  • Ну тогда просто запроси новую инициализацию sounds.init(); 7 фев 2020 в 11:51

1 ответ 1

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@8/swiper-bundle.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@8/swiper-bundle.min.js"></script>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.