Question

我尝试如下图进行设计。我将初始幻灯片设置为“ 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,
      },
    }
  });

Answer 1

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

无论如何，这是在某些索引上“做某事”的大纲。

swiper API slideChange和realIndex

一种方法就是简单地使用swiper API slideChange 事件和realIndex 属性，并在幻灯片更改时使用if {{1 }} ... 做点事情。

文档：

**第一项的索引为0。

realIndex ==  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 rel="stylesheet" href="https://unpkg.com/swiper@6.2.0/swiper-bundle.min.css"> </head> <body>  <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>  <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>  <script src="https://unpkg.com/swiper@6.2.0/swiper-bundle.min.js"></script>  <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>通过简单的js：

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

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

1 个答案:

swiper API slideChange和realIndex

完整代码示例：