Как вынести стрелки навигации в Swiper JS за пределы слайдера?
Как вынести стрелки навигации в Swiper JS за сам слайдер и установить в нужное мне место (обозначено стрелкой на картинке)? При попытке вынести их они просто исчезают, так как у родителя стоит overflow: hidden
- Вопрос задан более двух лет назад
- 457 просмотров
1 комментарий
Простой 1 комментарий
Swiper.js Как вынести стрелки за враппер?
tired optimist Ученик (182) Андрей Кудряшов, делал так document.getElementById(‘swiperPrev’) const swiperNext = document.getElementById(‘swiperNext’) swiperPrev.addEventListener(‘click’, () => < mySwiper.slidePrev(); >) swiperNext.addEventListener(‘click’, () => < mySwiper.slideNext(); >) и добавлял соответствующие id кнопкам
Похожие вопросы
Как сделать стрелки видимыми за пределами контейнера?
.swiper-container: Стоит в стилях overflow: hidden — чтобы item’ы за пределами не были видны.
При попытке настроить управляющие стрелочки(prev, next) по бокам за пределами контейнера[.swiper-container], они, соответственно, не видны.
Вопрос: Каким способом их вынести за пределы блока так, чтобы они были видны и выполняли свою функцию?
.
- Вопрос задан более трёх лет назад
- 6857 просмотров
Комментировать
Решения вопроса 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(); >);Курсы javascript
Коллеги, приветствую! Подскажите по проблеме, что-то я в тупике( У меня есть два слайдера на одной странице. Первый работает нормально, а вот на втором не работают миниатюры, они не двигаются вместе с основным слайдером. К тому же, на этом же втором слайдере не работает прокрутка и стрелки навигации.
07.02.2023, 10:33
Регистрация: 27.05.2010
Сообщений: 33,031
samdo,
укажите классы стрелок более подробно, в во всех nextEl и prevEl через родителя типа
nextEl: «.mySwiper4 .sec-slider-next», или как там у вас.