Как заставить кнопки кастомной навигации работать каждые только со своим слайдером, а не со всеми?

Question

[Дмитрий Путилов]

Возникла проблема с реализацией крутилки, сделал, все работает, но нужно чтобы при нажатии на стрелочки, они срабатывали только для своего swiper, а сейчас получается так, что они срабатывают для всех сразу. Как сделать, чтобы не прописывать каждому swiper свой navigation, а один для всех, и он работал корректно?

Вот как выглядит приложение

JS

const swiper = new Swiper('.swipers', {
    wrapperClass: 'swipers-wrapper',
    slideClass: 'slide',
    direction: 'vertical',
    slidesPerView: 3,
    navigation: {
        nextEl: '#twister_next',
        prevEl: '#twister_prev'
    }
})

HTML

<div class="twister">
                            <div class="swipers">
                                <div class="swipers-wrapper">
                                    <div class="slide"></div>
                                    <div class="slide">1</div>
                                    <div class="slide">2</div>
                                    <div class="slide">3</div>
                                    <div class="slide">4</div>
                                    <div class="slide">5</div>
                                    <div class="slide">6</div>
                                    <div class="slide">7</div>
                                    <div class="slide">8</div>
                                    <div class="slide">9</div>
                                    <div class="slide">10</div>
                                    <div class="slide"></div>
                                </div>
                            </div>

                            <div class="arrows">
                                <div class="arrow" id="twister_prev"><img src="./img/arrow.png" alt=""></div>
                                <div class="arrow" id="twister_next"><img src="./img/arrow.png" alt=""></div>
                            </div>
                        </div>

SCSS

.twister {
  display: flex;
  align-items: center;
  padding: 10px;

  .swipers {
    height: 180px;
    width: 70px;
    overflow: hidden;
    background: #aba6a6;
    position: relative;

    &::before {
      content: '';
      display: inline-block;
      width: 100%;
      height: 10px;
      background: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      filter: blur(5px);
    }

    &-wrapper {
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 4;

      .slide {
        padding: 5px;
        display: inline-block;
        text-align: center;
        line-height: 60px;
        position: relative;
        transform: rotateX(-50deg) scale(0.8);
        font-size: 20px;
        transition: 0.2s all ease;
      }

      .swiper-slide-active {
        transform: rotateX(50deg) scale(0.8);
      }

      .swiper-slide-next {
        transform: rotateX(0deg) scale(1.1);
      }

    }

  }

  .arrows {
    margin-left: 20px;

    .arrow {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid black;
      position: relative;
      cursor: pointer;

      &:last-child {
        transform: rotate(180deg);
        margin-top: 10px;
      }

      img {
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

Answer 1

[Виталий Першин]

Answer 2

[Arman]

nextEl: '#twister_next',
prevEl: '#twister_prev'

<div class="arrow" id="twister_prev"><img src="./img/arrow.png" alt=""></div>
<div class="arrow" id="twister_next"><img src="./img/arrow.png" alt=""></div>

это ведь основы html, сделай уникальные id. что-то вроде

twister_prev_1
twister_next_1

twister_prev_2
twister_next_2

Comments

[Дмитрий Путилов]

Так это ведь придется прописывать для каждого такого свайпера код

[Дмитрий Путилов]

А нужно что бы не большой кусочек кода работал для всего, потому что они все шаблонные

[Антон Литвиненко]

инитить их циклом. а вот слик умеет так как вам надо

[strelok011]

Ну, как бы сааамое очевидное - нельзя копипастить элементы с id :)
Соответственно решив эту проблему удастся найти решение и остальному.
Я бы первым делом коробочным кнопкам стили подправил а не монтировал внешние.
Либо циклом всё это добавлял и инициализировал кнопки для каждого слайдера со своими ид