Слайдер с превьюшками
Пример слайдера Swiper с горизонтальными превью.
Скопировано
<link rel='stylesheet' href='//unpkg.com/swiper/swiper-bundle.min.css' />
<script src='//unpkg.com/swiper/swiper-bundle.min.js'></script>
<div class='swiper gallery-top'>
<div class='swiper-wrapper'>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-2.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-6.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-7.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-8.jpg)'></div>
</div>
<div class='swiper-button-next swiper-button-white'></div>
<div class='swiper-button-prev swiper-button-white'></div>
</div>
<div class='swiper gallery-thumbs'>
<div class='swiper-wrapper'>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-2.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-6.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-7.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-8.jpg)'></div>
</div>
</div>
Скопировано
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
margin-bottom: 8px;
}
.gallery-top .swiper-slide {
height: 300px;
}
.gallery-thumbs .swiper-slide {
height: 100px;
width: 25%;
opacity: 0.4;
cursor: pointer;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
cursor: default;
}
Скопировано
var galleryThumbs = new Swiper( '.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true
});
new Swiper( '.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
thumbs: {
swiper: galleryThumbs
}
});Пример слайдера Swiper с вертикальными превью.
Скопировано
<link rel='stylesheet' href='//unpkg.com/swiper/swiper-bundle.min.css' />
<script src='//unpkg.com/swiper/swiper-bundle.min.js'></script>
<div class='flex'>
<div class='swiper gallery-top'>
<div class='swiper-wrapper'>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-2.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-6.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-7.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-8.jpg)'></div>
</div>
<div class='swiper-button-next swiper-button-white'></div>
<div class='swiper-button-prev swiper-button-white'></div>
</div>
<div class='swiper gallery-thumbs'>
<div class='swiper-wrapper'>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-2.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-6.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-7.jpg)'></div>
<div class='swiper-slide' style='background-image:url(https://swiperjs.com/demos/images/nature-8.jpg)'></div>
</div>
</div>
</div>
Скопировано
.flex {
display: flex;
justify-content: space-between;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
width: calc(100% - 72px);
}
.gallery-top .swiper-slide {
height: 400px;
}
.gallery-thumbs {
width: 60px;
height: 400px;
}
.gallery-thumbs .swiper-slide {
opacity: 0.4;
cursor: pointer;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
cursor: default;
}
Скопировано
var galleryThumbs = new Swiper( '.gallery-thumbs', {
spaceBetween: 8,
slidesPerView: 5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
direction: 'vertical'
});
new Swiper( '.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
thumbs: {
swiper: galleryThumbs
}
});