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

问题描述 投票：0回答：1

我试图使设计像下面的图像。enter image description here我将初始幻灯片设置为“ 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个回答
0
投票

Hard知道您要做什么（您的设计和您添加的代码不匹配）。无论如何，这是在某些索引上“做某事”的概述。

swiper API

仅使用swiper API slideChange事件和realIndex属性并检查：

如果realIndex = 1或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 == 1) {
        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/css/swiper.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/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      initialSlide: 1,
      slidesPerView: 3,
      centeredSlides: true,
      spaceBetween: 20,
      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 == 1 || realIndex == 0) {
        console.log(realIndex + " - hide arrow");
        arrow.style.display = 'none';
      } else {
        console.log(realIndex + " - show arrow");
        arrow.style.display = 'block';
      }
    });
  </script>

Show/hide通过简单的js：

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.