rusyska55011
@rusyska55011

Как сделать кнопки между миниатюрами Swiper Slider?

Нужно реализовать кнопки вокруг миниатюры
613cc89cb3207999602053.jpeg

При добавлении объектов кнопок вторая кнопка сползает:
(В тестовом режиме первая кнопка - "1", а вторая соответственно - "2", и она ползает)
613cc929ab779991026684.jpeg

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;
}
  • Вопрос задан
  • 539 просмотров
Решения вопроса 1
Raloynner
@Raloynner
Frontend
https://jsfiddle.net/Raloynner/1echfna2/8/ попробуй slick я там уже настроил
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы