Всем привет. Решил использовать в верстке более гибкий компонент слайдера Swiper, его возможности полностью подошли под проект.
idangero.us/swiper/api
Но, так как пользуюсь им впервые, возникли сложности. Убил уже массу времени, вот решил спросить совета у бывалых. Как сделать подобный слайд?
Конкретно интересует, как сузить область thumbnails`ов, чтобы впихнуть туда кнопки. Пока мои результаты печальны.
Вот мой код:
HTML:
<div class="thumb-slider-wrapper">
<div class="swiper-container slider">
<div class="swiper-wrapper">
<img src="img/slide.jpg" class="swiper-slide" alt="">
<img src="img/slide.jpg" class="swiper-slide" alt="">
<img src="img/slide.jpg" class="swiper-slide" alt="">
</div>
</div>
<div class="swiper-container thumbs">
<div class="swiper-wrapper">
<img class="swiper-slide" src="img/slide-thumb.jpg" alt="">
<img class="swiper-slide" src="img/slide-thumb.jpg" alt="">
<img class="swiper-slide" src="img/slide-thumb.jpg" alt="">
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
JS:
// thubmslider
var galleryThumbs = new Swiper('.thumb-slider-wrapper .thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
centeredSlides: false,
slidesOffsetBefore: 70,
slidesOffsetAfter: 70,
watchSlidesVisibility: true,
watchSlidesProgress: false,
simulateTouch: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryTop = new Swiper('.thumb-slider-wrapper .slider', {
spaceBetween: 10,
thumbs: {
swiper: galleryThumbs
}
});
Была идея сузить область через CSS, установить width: calc(100% - 140px) и сделать overflow: hidden, но что-то это работает так себе.
P.S.: Пол-часа пытался создать свой код на CodePen, так ничерта и не вышло. Не хочет кушать сорцы с гитхаба.