Отображение стрелок навигации за пределами контейнера swiper
Я пытаюсь отобразить стрелки навигации вне swiper-container, а не над ползунком. Я попробовал позиционировать с помощью CSS:
.swiper-button-next, .swiper-container-rtl .swiper-button-prev < right:-20px; >.swiper-button-prev, .swiper-container-rtl .swiper-button-next < background-image:url(assets/img/swiper-left.png); left:-20px; >Но стрелки не отображаются из-за переполнения CSS swiper-container: hidden;
Поэтому я попробовал переместить стрелки навигации вне swiper-container, теперь они отображаются, но они влияют на все Swiper’ы на странице.
Мой Swiper настроен так:
initialize swiper */ var mySwiper = new Swiper ('.swiper-container', < // Optional parameters nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', slidesPerView: 2, spaceBetween: 30, loop: true >); Поделиться Источник 02 мая 2017 в 10:04
2 ответа
Я нашел решение!
Инициализируя Swiper с помощью Jquery.each(). Таким образом, если вы переместите стрелки Swiper за пределы контейнера Swiper, они будут управлять только Swiper, к которому они относятся, и вы можете разместить их где угодно с помощью CSS. То же самое должно работать и с пагинацией.
jQuery(function()< $('.swiper-container').each(function( i ) < var mySwiper = new Swiper ($('.swiper-container')[i], < // Navigation arrows nextButton: $('.swiper-button-prev')[i], prevButton: $('.swiper-button-next')[i], // Optional parameters slidesPerView: 2, >); >); >); Поделиться 05 мая 2017 в 12:46
Ваше решение не так хорошо. Просто попробуйте использовать другие имена для swiper-button-prev и swiper-button-next. И создайте еще одно внутреннее имя для слайдера с position: relative. пример:
var mySwiperAlbum = new Swiper ('.js_album-slider', < nextButton: '.album-slider__button-next', prevButton: '.album-slider__button-prev', slidesPerView: 4, spaceBetween: 10, autoplay: 5000, >); css: для album-slider установите position:relatve; и для album-slider__wrapper width: 80%; или если вам нужна ширина слайдера: 100%; то установите для nav-кнопок слева и справа около -30px
Как вынести стрелки навигации в Swiper JS за пределы слайдера?
Как вынести стрелки навигации в Swiper JS за сам слайдер и установить в нужное мне место (обозначено стрелкой на картинке)? При попытке вынести их они просто исчезают, так как у родителя стоит overflow: hidden
- Вопрос задан более двух лет назад
- 478 просмотров
1 комментарий
Простой 1 комментарий
Как сделать стрелки видимыми за пределами контейнера?
.swiper-container: Стоит в стилях overflow: hidden — чтобы item’ы за пределами не были видны.
При попытке настроить управляющие стрелочки(prev, next) по бокам за пределами контейнера[.swiper-container], они, соответственно, не видны.
Вопрос: Каким способом их вынести за пределы блока так, чтобы они были видны и выполняли свою функцию?
.
- Вопрос задан более трёх лет назад
- 6931 просмотр
Комментировать
Решения вопроса 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]
Ещё никто не добавил руководство по использованию для метки swiper, но есть описание этой метки.
242 вопроса
Конкурсные
Неотвеченные
- Конкурсные 0
- Неотвеченные
- Цитируемые
- Рейтинг
- Неотвеченные (мои метки)
2k показов
Как вызвать событие в swiper по нажатию на кнопку?
Есть такая конструкция слайдера: var menu_obj = [‘Все’, ‘Последние’] const ObjSlider = new Swiper(‘.objects-swiper’, < pagination: < el: '.swiper-pagination-attached', clickable: true, .
задан 8 авг 2021 в 19:29
4k показов
Disabled стрелки swiper при первой загрузке
При загрузке страницы, стрелки компонента swiper стоят как disabled. Если ткнуть в слайдер, потягать, тогда стрелки появляются и можно дальше переключать слайды. HTML
задан 15 мая 2019 в 9:38
365 показов
Карусель с возможность скролла полосой прокрутки
Доброго времени суток. Необходимо реализовать карусель с автоскроллом, но возможностью дополнительно перелистывать элементы полосой прокрутки, аналогично здесь: https://jsfiddle.net/yh1r2tjm/29/ В .
задан 26 июн 2022 в 12:18
3k показов
Как задать отступы у слайдов в Swiper-slider?
Без отступов всё хорошо, а с ними видно вместо двух слайдов три
задан 15 мая 2021 в 19:51
438 показов
Как сделать превью слайдера с правой стороны?
Хочу получить такой результат, но не получается. У меня такой слайдер: Swiper demo&.
задан 27 июл 2022 в 10:03
Как убрать стандартную смену слайдов на слайдере Swiper?
Как убрать стандартную смену слайдов на слайдере Swiper ? И поставить обычную плавную замену картинок без никаких выезжаний з правого края ? То есть нужно чтобы следующий слайд просто заменял .
user491502
задан 22 июн 2022 в 13:40
355 показов
Swiper пагинация is not a function
У меня есть несколько слайдеров с пагинацией на странице и они работают как и задумывалось, но если перейти на любую другую страницу, то я получаю ошибку slider.el.querySelector is not a function .
задан 15 дек 2021 в 5:55
6k показов
swiper как настроить breakpoints на мобильной и планшет одинаково, десктоп стандартно
Подскажите как в swiper настроить breakpoints на мобильной, планшет и малых экранах мониторов чтобы было 1 слайд , а на десктоп стандартно 4 слайда. Как ни делаю мобилка и большой экран работает, .
задан 1 дек 2021 в 11:16
2k показов
Переключение слайда при наведении на миниатюру Swiper.js
Всем привет! есть слайдер с вертикальными миниатюрами. Сейчас при клике на миниатюру переключается слайд. А нужно, что бы это было при наведении на неё. Последней строчкой кода я пытался этого .
задан 22 дек 2020 в 14:34
Проблема с анимацией при ховере на карусели swiper
Суть проблемы: Дизайнер придумал такую анимацию что при ховере на слайд он увеличивается а остальные слайды рядом уменьшаются так что бы 4 слайда (на десктопе) заполняли всю ширину слайдера. Сейчас .
задан 10 июл 2023 в 21:19
305 показов
счетчик страниц слайдера Swiper
Использую Swiper слайдер (прогрессбар + фракции), на разной ширине экрана я показываю разное количество слайдов + есть фильтрация. Подскажите, пожалуйста, как исправить код, чтобы слайды обновлялись .
задан 19 янв 2022 в 19:43
2k показов
Swiper разместить несколько слайдов по центру
Есть пример на codepen Нужно сделать так, чтобы видимые фото были по центру, то есть так: centeredSlides не помог — он только одно фото центрирует. Как сделать так, чтобы было как на картинке?
задан 10 окт 2019 в 20:35
Не правильно отрабатывает инициализация слайдера
При загрузке страницы я навешиваю события одного клика на ссылки табов и этим инициализирую слайдер внутри него, инициализация находится в setTimeout(), после навешивания обработчиков, тригерю клик по .
задан 29 мая 2019 в 9:05
382 показа
Как присвоить высоту одного элемента к другим элементам на чистом JS?
Как мне через vanilla js получить высоту самого высокого элемента слайдера и присвоить его к остальным, чтобы по итогу была одна высота для всех? На сайте использовался swiper-слайдер, при добавлении .
задан 28 фев 2021 в 7:26
7k показов
Инициализация нескольких swiper slider
на странице есть четыре слайдера, инициализирую как два разных slider1 и slider2. Слайдеры под классом slider1 и slider2 по два слайдера в каждом классе, для синхронной работы. Проблема с пагинацией, .