Несколько слайдеров в одном слайдере

Игорь

Здравствуйте! В двух словах о задаче: есть блок-слайдер, в котором будет несколько блочков, каждый из которых также является слайдером. Наглядно требуемый результат можно посмотреть на codepen.io

Теперь к сути проблемы: то, что без проблем работает в кодпене, перестает работать как надо когда дело доходит до верстки нужных элементов - при нажатии на кнопки лево/право дочерних слайдеров, слайд пролистывается сразу во всех карусельках, хотя на codepen все работает абсолютно корректно. Есть у кого-то представление в чем причина и как это поправить?

Здесь ссылка на страницу с проблемным объектом.

var mainSwiper = new Swiper('.main-slider', {
    slidesPerView: 3,
    spaceBetween: 15,
    centeredSlides: false,
    nextButton: '.uploaded-in-next',
    prevButton: '.uploaded-in-prev',
});

var mainSecondSwiper = new Swiper('.block-slider', {
    slidesPerView: 1,
    spaceBetween: 10,
    centeredSlides: false,
    nextButton: '.next-btn',
    prevButton: '.prev-btn',
});
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #061539;
}
.main-slider-section {
  width: 90%;
  height: 300px;
}
.main-slider {
  display: flex;
  width: 100%;
  height: 100%;
}
.main-slider .swiper-wrapper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #fff;
}

.block-slider {
  width: 100%;
  height: 100%;
}
.block-slider .swiper-slide {
  background: #4F628E;
}
.next-btn,
.prev-btn {
  width: 26px;
  height: 20px;
  margin-top: -10px;
}
<div class="wrapper">
  <div class="main-slider-section">
    <div class="main-slider swiper-container">
      <div class="swiper-wrapper">
        <a class="swiper-slide">
          <div class="block-slider swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                1.1
              </div>
              <div class="swiper-slide">
                1.2
              </div>
              <div class="swiper-slide">
                1.3
              </div>
            </div>
            
            
          </div>
        </a>
        <a class="swiper-slide">
          <div class="block-slider swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                2.1
              </div>
              <div class="swiper-slide">
                2.2
              </div>
              <div class="swiper-slide">
                2.3
              </div>
            </div>
            
            
          </div>
        </a>
        <a class="swiper-slide">
          <div class="block-slider swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                3.1
              </div>
              <div class="swiper-slide">
                3.2
              </div>
              <div class="swiper-slide">
                3.3
              </div>
            </div>
            
            
          </div>
        </a>
        <a class="swiper-slide">
          <div class="block-slider swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                4.1
              </div>
              <div class="swiper-slide">
                4.2
              </div>
              <div class="swiper-slide">
                4.3
              </div>
            </div>
            
            
          </div>
        </a>
      </div>
    </div>
    
    
  </div>
</div>
1 ответ

Игорь

Думаю Вам стоит обратить внимание на параметр инициализации Swiper { nested: true }

licensed under cc by-sa 3.0 with attribution.