Как вынести стрелки swiper за пределы слайдера
Перейти к содержимому

Как вынести стрелки swiper за пределы слайдера

  • автор:

Подскажите по слайдеру Swiper, проблема с breakpoints

Author24 — интернет-сервис помощи студентам

День добрый, проблема с внедрением слайдера, может подскажите чего?
Я его сделал в том виде, когда нужно стрелки навигации вынести за пределы за контейнера слайдера, прописал в это в 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 за пределы слайдера?

Как вынести стрелки навигации в Swiper JS за сам слайдер и установить в нужное мне место (обозначено стрелкой на картинке)? При попытке вынести их они просто исчезают, так как у родителя стоит overflow: hidden

60ebbf0ba75f1729007284.jpeg

  • Вопрос задан более двух лет назад
  • 577 просмотров

1 комментарий

Простой 1 комментарий

Как сделать стрелки видимыми за пределами контейнера?

.swiper-container: Стоит в стилях overflow: hidden — чтобы item’ы за пределами не были видны.

При попытке настроить управляющие стрелочки(prev, next) по бокам за пределами контейнера[.swiper-container], они, соответственно, не видны.

Вопрос: Каким способом их вынести за пределы блока так, чтобы они были видны и выполняли свою функцию?

Slide 1
Slide 2
Slide 3

.

  • Вопрос задан более трёх лет назад
  • 7212 просмотров

Комментировать
Решения вопроса 1

Добавить кнопки в нужном месте за пределами .swiper-container и вручную повесить на них slideNext и slidePrev: https://swiperjs.com/api/#methods

Ответ написан более трёх лет назад
Нравится 4 2 комментария
spasatelev @spasatelev Автор вопроса

У меня даже сработало когда я просто вынес, а в свойстве оставил стрелки, без методов))
Реализовал через метод из документации — все работает четко!
Да пришлось все обернуть, зато полностью рабочий слайдер.
Спасибо за решение)

aleksandr-n @aleksandr-n

На мой взгляд лучшее решение при условии если у тебя не одна карусель а несколько.

 
Slide 1
Slide 2
Slide 3
Slide 1
Slide 2
Slide 3
//Swiper $('.swiper-object .js-sample-slider').each(function(index, value) < const swiperId = $(value).data('swiper-id'); // Получаем ID карусели из data-атрибута const swiperNav = $('.swiper-navigation[data-swiper-id="' + swiperId + '"]'); // Находим контейнер навигации по ID карусели const swiper = new Swiper(value, < slidesPerView: 6, spaceBetween: 16, lazy: true, //lazy load loop: true, //loop pagination: < //pagination(dots) el: '.swiper-pagination', clickable: true, >, navigation: < //navigation(arrows) nextEl: swiperNav.find('.swiper-button-next')[0], prevEl: swiperNav.find('.swiper-button-prev')[0], >, breakpoints: < 640: < slidesPerView: 2, spaceBetween: 20, >, 768: < slidesPerView: 4, spaceBetween: 40, >, 1024: < slidesPerView: 6, spaceBetween: 16, >, >, >); >); // Назначение событий на кнопки навигации $('.swiper-navigation .swiper-button-prev').on('click', function() < const swiperId = $(this).closest('.swiper-navigation').data('swiper-id'); const swiper = $('.js-sample-slider[data-swiper-id="' + swiperId + '"]')[0].swiper; swiper.slidePrev(); >); $('.swiper-navigation .swiper-button-next').on('click', function() < const swiperId = $(this).closest('.swiper-navigation').data('swiper-id'); const swiper = $('.js-sample-slider[data-swiper-id="' + swiperId + '"]')[0].swiper; swiper.slideNext(); >);

Swiper.js Как вынести стрелки за враппер?

tired optimist Ученик (183) Андрей Кудряшов, делал так document.getElementById(‘swiperPrev’) const swiperNext = document.getElementById(‘swiperNext’) swiperPrev.addEventListener(‘click’, () => < mySwiper.slidePrev(); >) swiperNext.addEventListener(‘click’, () => < mySwiper.slideNext(); >) и добавлял соответствующие id кнопкам

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *