Нужно реализовать кнопки вокруг миниатюры
При добавлении объектов кнопок вторая кнопка сползает:
(В тестовом режиме первая кнопка - "1", а вторая соответственно - "2", и она ползает)
HTML:
<div class="swiper slider-mini">
<div class="swiper-wrapper slider-mini__wrapper">
<div class="slider-button-next">1</div>
<div class="swiper-slide slider-mini__slide">
<img src="img/slider/Layer%2020.png">
</div>
<div class="swiper-slide slider-mini__slide">
<img src="img/slider/Layer%2020.png">
</div>
<div class="swiper-slide slider-mini__slide">
<img src="img/slider/Layer%2020.png">
</div>
<div class="swiper-slide slider-mini__slide">
<img src="img/slider/Layer%2020.png">
</div>
<div class="slider-button-prev">2</div>
</div>
</div>
JS:
// Slider Swiper
let slider = new Swiper('.slider', {
pagination: {
el: '.swiper-pagination',
clickable: true
},
thumbs: {
swiper: {
el: '.slider-mini',
slidesPerView : 4
}
},
navigation: {
nextEl: '.slider-button-next',
prevEl: '.slider-button-prev'
},
});
CSS:
.slider__slide {
text-align: center;
}
.slider-mini__wrapper {
text-align: center;
}
.slider-mini__slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
.slider-mini__slide.swiper-slide-thumb-active {
opacity: 0.1;
}