Как отключить навигацию по swiper на activeIndex == 1 - PullRequest
Новая
       12

Как отключить навигацию по swiper на activeIndex == 1

0 голосов
/ 04 февраля 2020

Я пытаюсь сделать дизайн как на картинке ниже. enter image description here Я установил начальный слайд на «1». я хочу отключить навигацию swiper по индексу "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,
      },
    }
  });

1 Ответ

1 голос
/ 10 февраля 2020

Это сложно знать, что вы пытаетесь сделать (ваш дизайн и код, который вы добавили not совпадают).

В любом случае, это план за «выполнение чего-либо» для некоторого индекса.

swiper API slideChange & realIndex

Один из способов - просто использовать swiper API slideChange событие и свойство realIndex и проверить:

Пример: при смене слайда, если 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 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,
      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(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/

...