Как вынести стрелки навигации в Swiper JS за пределы слайдера?
Как вынести стрелки навигации в Swiper JS за сам слайдер и установить в нужное мне место (обозначено стрелкой на картинке)? При попытке вынести их они просто исчезают, так как у родителя стоит overflow: hidden
- Вопрос задан более двух лет назад
- 411 просмотров
1 комментарий
Простой 1 комментарий
swiper js не работает
Swiper JS — это библиотека для создания слайдеров на веб-страницах. Если она не работает, то возможно, что у вас есть проблемы с подключением библиотеки или с настройками самого слайдера.
Вот несколько шагов, которые вы можете выполнить, чтобы решить проблему:
- Убедитесь, что вы правильно подключили библиотеку Swiper JS. Для этого вам нужно добавить ссылку на файлы библиотеки в разделе вашей HTML-страницы:
rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> src="https://unpkg.com/swiper/swiper-bundle.min.js">
- Убедитесь, что вы правильно настроили свой слайдер. Вот пример кода, который создает слайдер с двумя слайдами:
const mySwiper = new Swiper('.swiper-container', slidesPerView: 2, spaceBetween: 30, loop: true, pagination: el: '.swiper-pagination', clickable: true, >, >);
- Убедитесь, что вы правильно разместили HTML-код для своего слайдера. Вот пример кода, который создает контейнер для слайдера и два слайда:
class="swiper-container"> class="swiper-wrapper"> class="swiper-slide">Slide 1 class="swiper-slide">Slide 2 class="swiper-pagination">
Подскажите по слайдеру Swiper, проблема с breakpoints
День добрый, проблема с внедрением слайдера, может подскажите чего?
Я его сделал в том виде, когда нужно стрелки навигации вынести за пределы за контейнера слайдера, прописал в это в js, и все работало до той поры, пока не встал вопрос по breakpoints. Когда я прописываю параметры breakpoints слайдер разваливается, принимает непотребный вид. Без breakpoints в дескопте работает отлично.
Что не так?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
script> document.querySelectorAll('.swiper-container').forEach(function(elem) { new Swiper(elem, { slidesPerView: 4, spaceBetween: 30, breakpoints: { 320: { slidesPerView: 2, spaceBetween: 20 }, 768: { slidesPerView: 2, spaceBetween: 30 }, 1024: { slidesPerView: 2, spaceBetween: 12 }, }, navigation: { nextEl: elem.nextElementSibling.nextElementSibling, prevEl: elem.nextElementSibling, }, }); }); script>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
div class="swiper-object"> div class="swiper swiper-container"> div class="swiper-wrapper"> div class="swiper-slide about-card__img-1"> h3 class="about-card__title"> Дмитрий Гутенберг /h3> p class="about-card__desc"> Эксперт (ну, почти) по всем вопросам (почти). /p> /div> div class="swiper-slide about-card__img-2"> h3 class="about-card__title"> Анна Васильева /h3> p class="about-card__desc"> Как я здесь оказалась?br> А главное — зачем? /p> /div> div class="swiper-slide about-card__img-3"> h3 class="about-card__title"> Пётр Дмитриевский /h3> p class="about-card__desc"> Господа! Внимание! Благодарю за внимание! /p> /div> div class="swiper-slide about-card__img-4"> h3 class="about-card__title"> Татьяна Флеганова /h3> p class="about-card__desc"> Одна я в пальто стою красивая, br>а вокруг. /p> /div> div class="swiper-slide about-card__img-5"> h3 class="about-card__title"> Дмитрий Гутенберг /h3> p class="about-card__desc"> Эксперт (ну, почти) по всем вопросам (почти). /p> /div> div class="swiper-slide about-card__img-6"> h3 class="about-card__title"> Дмитрий Гутенберг /h3> p class="about-card__desc"> Эксперт (ну, почти) по всем вопросам (почти). /p> /div> /div> /div> div class="swiper-button-prev">/div> div class="swiper-button-next">/div> /div>
С прописанными breakpoints на десктопе две фото вываливаются вместо трёх, и ничего не меняется при любом расширении экрана.
Swiper.js Как вынести стрелки за враппер?
tired optimist Ученик (182) Андрей Кудряшов, делал так document.getElementById(‘swiperPrev’) const swiperNext = document.getElementById(‘swiperNext’) swiperPrev.addEventListener(‘click’, () => < mySwiper.slidePrev(); >) swiperNext.addEventListener(‘click’, () => < mySwiper.slideNext(); >) и добавлял соответствующие id кнопкам
Похожие вопросы