主页 / 问题 / 1079530
Accepted
Алексей
Asked:2020-02-07 17:19:02 +0000 UTC2020-02-07 17:19:02 +0000 UTC

如何按条件禁用对swiper js的滑动？

  • 772

有 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();

参数改变，但没有反应，更准确地说，滑块对鼠标或手指的滑动做出反应并做出反应

javascript

1 个回答

  1. Best Answer

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

    • 1

相关问题