如何在 activeIndex == 1 上禁用滑动导航答案

【问题标题】：How to make swiper navigation disabled on activeIndex == 1如何在 activeIndex == 1 上禁用滑动导航
【发布时间】：2020-09-14 15:40:54
【问题描述】：

我尝试制作如下图所示的设计。我将初始幻灯片设置为“1”。我想在索引“1”上禁用滑动导航。你能弄清楚怎么做吗？我已经尝试了很多关于堆栈溢出的答案，但仍然不能。这是我的代码。

//Initialize Swiper
  var swiper = new Swiper('.swiper-container.other-adventure', {
    autoHeight: true,
    initialSlide: 1,
    slidesPerView: 4,
    centeredSlides: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      480: {
        slidesPerView: 1,
        spaceBetween: 20,
      },
      768: {
        slidesPerView: 3,
        spaceBetween: 20,
      },
      1024: {
        slidesPerView: 4,
        spaceBetween: 15,
      },
      2560: {
        slidesPerView: 4,
        spaceBetween: 15,
      },
    }
  });

【问题讨论】：

标签： swiper swiperjs

【解决方案1】：

很难知道你要做什么（你的设计和你添加的代码 not 匹配）。

不管怎样，这是在某个索引上“做某事”的大纲。

swiper API slideChange & realIndex

一种方法是简单地使用 swiper API slideChange event 和 realIndex property 和 On slide change if realIndex == 0... 做点什么。

文档：

** 第一项的索引为 0。

 <script>
    /* hide left arrow on load (Another option is to put this code inside init event) */
    var arrow = document.getElementsByClassName('swiper-button-prev')[0];
    arrow.style.display = 'none';
    /* Swiper API - if index = 1 hide left arrow / otherwise show */
    swiper.on('slideChange', function() {
      var realIndex = swiper.realIndex;
      if (realIndex == 0) {
        console.log(realIndex + " - hide arrow");
        arrow.style.display = 'none';
      } else {
        console.log(realIndex + " - show arrow");
        arrow.style.display = 'block';
      }
    });
  </script>

完整代码示例：

html, body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
    height: 500px;
}
.swiper-container {
  width: 100%;
    height: 100px;
}
.swiper-slide {
  text-align: center;
  font-size: 24px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide-active{
  background: red;
}

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@6.2.0/swiper-bundle.min.css">
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper@6.2.0/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      initialSlide: 1,
      slidesPerView: 3,
      spaceBetween: 20,
      centeredSlides: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

  <script>
    /* hide left arrow by deafult */
    var arrow = document.getElementsByClassName('swiper-button-prev')[0];
    arrow.style.display = 'none';
    /* Swiper API - if index = 1 hide left arrow / otherwise show */
    swiper.on('slideChange', function() {
      var realIndex = swiper.realIndex;
      if (realIndex == 0) {
        console.log("real index:" + realIndex + " - hide arrow");
        arrow.style.display = 'none';
      } else {
        console.log("real index:" + realIndex + " - show arrow");
        arrow.style.display = 'block';
      }
    });
  </script>

Show/hide通过简单的js：

https://gomakethings.com/how-to-show-and-hide-elements-with-vanilla-javascript/

【讨论】：