makc9I
@makc9I
фрилансер, web разработчик

Как сделать отступы для thumbnail в Swiper?

Всем привет. Решил использовать в верстке более гибкий компонент слайдера Swiper, его возможности полностью подошли под проект.
idangero.us/swiper/api
Но, так как пользуюсь им впервые, возникли сложности. Убил уже массу времени, вот решил спросить совета у бывалых. Как сделать подобный слайд?
5d68269c5e8fb151868434.png

Конкретно интересует, как сузить область 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, так ничерта и не вышло. Не хочет кушать сорцы с гитхаба.
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
SkiperX
@SkiperX Куратор тега CSS
frontend
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы