Здравствуйте! В двух словах о задаче: есть блок-слайдер, в котором будет несколько блочков, каждый из которых также является слайдером. Наглядно требуемый результат можно посмотреть на 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;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>
<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 class="swiper-button-prev prev-btn"></div>
<div class="swiper-button-next next-btn"></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 class="swiper-button-prev prev-btn"></div>
<div class="swiper-button-next next-btn"></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 class="swiper-button-prev prev-btn"></div>
<div class="swiper-button-next next-btn"></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 class="swiper-button-prev prev-btn"></div>
<div class="swiper-button-next next-btn"></div>
</div>
</a>
</div>
</div>
<div class="swiper-button-prev uploaded-in-prev"></div>
<div class="swiper-button-next uploaded-in-next"></div>
</div>
</div>