<!-- Swiper -->
<div class="swiper-container gallery-top" id="top">
<div class="swiper-wrapper">
...
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs" id="thumbs">
<div class="swiper-wrapper">
...
</div>
</div>
<br><br><br><br><br>
Как сделать второй слайдер?
<br><br><br><br><br>
<!-- Swiper 2 -->
<div class="swiper-container gallery-top" id="top2">
<div class="swiper-wrapper">
...
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs" id="thumbs2">
<div class="swiper-wrapper">
...
</div>
</div>
<br><br><br><br><br>
Как сделать n слайдер?
<br><br><br><br><br>
<!-- Swiper 2 -->
<div class="swiper-container gallery-top" id="top3">
<div class="swiper-wrapper">
...
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs" id="thumbs3">
<div class="swiper-wrapper">
...
</div>
</div>html, body {
position: relative;
height: 100%;
}
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 40%;
height: 300px;
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 40%;
width: 50%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}var galleryTop = new Swiper('#top', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,
loop:true,
loopedSlides: 5, //looped slides should be the same
});
var galleryThumbs = new Swiper('#thumbs', {
spaceBetween: 10,
slidesPerView: 4,
touchRatio: 0.2,
loop:true,
loopedSlides: 5, //looped slides should be the same
slideToClickedSlide: true
});
var galleryTop2 = new Swiper('#top2', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,
loop:true,
loopedSlides: 5, //looped slides should be the same
});
var galleryThumbs2 = new Swiper('#thumbs2', {
spaceBetween: 10,
slidesPerView: 4,
touchRatio: 0.2,
loop:true,
loopedSlides: 5, //looped slides should be the same
slideToClickedSlide: true
});
var galleryTop3 = new Swiper('#top3', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,
loop:true,
loopedSlides: 5, //looped slides should be the same
});
var galleryThumbs3 = new Swiper('#thumbs3', {
spaceBetween: 10,
slidesPerView: 4,
touchRatio: 0.2,
loop:true,
loopedSlides: 5, //looped slides should be the same
slideToClickedSlide: true
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;
galleryTop2.params.control = galleryThumbs2;
galleryThumbs2.params.control = galleryTop2;
galleryTop3.params.control = galleryThumbs3;
galleryThumbs3.params.control = galleryTop3;