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

#javascript #html #jquery #css

Здравствуйте! В двух словах о задаче: есть блок-слайдер, в котором будет несколько
блочков, каждый из которых также является слайдером. Наглядно требуемый результат можно
посмотреть на 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;
}





  

    

      

        
          

            

              

                1.1
              
              

                1.2
              
              

                1.3
              
            
            

            

          
        
        
          

            

              

                2.1
              
              

                2.2
              
              

                2.3
              
            
            

            

          
        
        
          

            

              

                3.1
              
              

                3.2
              
              

                3.3
              
            
            

            

          
        
        
          

            

              

                4.1
              
              

                4.2
              
              

                4.3
              
            
            

            

          
        
      
    
    

    

  




    

Ответы

Ответ 1

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