0

我尝试制作如下图所示的设计。 在此处输入图像描述 我将初始幻灯片设置为“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,
      },
    }
  });
4

1 回答 1

2

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

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

swiper API slideChange & realIndex

一种方法是简单地使用 swiper APIslideChange 事件和realIndex 属性和 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/

于 2020-02-10T17:14:45.513 回答