CSS — Как сделать так, чтобы стрелки ползунка swiper находились за пределами ползунка, занимающего 12 рядов столбцов
Я использую слайдер swiper и хотел бы иметь навигационные стрелки вне слайдера. То, что я хотел бы сделать, это то же самое, что и на сайте airbnb, где слайдер с изображениями занимает целую 12 столбцов, но стрелки находятся за его пределами. Я использую bootstrap twitter css framework, и я пробовал разные вещи, но ничего не работал и не знаю, как это сделать?
Html выглядит так:
4 ответа
Я только что сделал это для одного из моих текущих проектов. Вам просто нужно изменить расположение кнопок навигации HTML и поместить их вне swiper-container . Для лучшего подхода и поведения из библиотеки добавьте в них новый класс и измените элемент в вызове JavaScript.
Это отлично сработало, и вы можете с легкостью размещать стрелки вне оболочки с помощью CSS.
Это работает для меня, это то же самое, что и старый ответ, но, может быть, он выглядит лучше 🙂
Это общее решение. Чтобы переместить стрелки за пределы контейнера, вам нужно сначала удалить div стрелки из .swiper-container. Создайте еще один большой контейнер, в котором есть .swiper-container и ваши перемещенные стрелки. Задайте эту большую позицию контейнера: относительно как стрелки, которые имеют позицию: абсолют. Убедитесь, что ширина .swiper-container изменена на значение меньше 100% (например, 90%, 95%), чтобы избежать совпадения со стрелками. Если вы хотите, чтобы ширина контейнера-свипера оставалась равной ширине всей страницы, задайте поле -ve для большего контейнера.
Это основной пример того, как его достичь. Вы были близки. Я немного изменил код, чтобы сделать его видимым внутри фрагмента.
Swiper nav arrows outside the swiper-container #2093
Hi guys,
I’m trying to display the nav arrows outside the swiper-container and not over the slider.
I tried positioning with 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; >
But the arrows won’t display because of the swiper-container CSS overflow: hidden;
So I tried moving the nav arrows outside the swiper-container, now they display but they effect all the Swipers in the page.
Русские Блоги
Реализовать левые и правые стрелки Swiper, поставьте стиль стрелки
Шкупалка очень прост в использовании, но дизайн не даст вам дизайн в стиле Swiper, в целом, круглое вещание будет иметь следующую ситуацию:
Сама Swiper Arrow внутри;
И нам нужны стрелки снаружи;
Стиль Swiper по умолчанию — это часть стрелки в интерьере, то как мы реализуем стрелку ВВС, чтобы положить его на улицу?
CSS — How to have swiper slider arrows outside of slider that takes up 12 column row
I am using swiper slider and would like to have navigation arrows outside of the slider. What I would basically like to do is the same as it looks like on airbnb site, where slider with images takes up whole 12 column row, but arrows are outside of it. I am using bootstrap twitter css framework and I have tried various things but nothing worked and don’t know how to achieve this?
The css is this:
Html looks like this:
And this is the script:
15 Answers 15
I just did this for one of my current projects. You just have to change the location of the navigation HTML buttons and put them outside the swiper-container . For a better approach and behavior from the library, add a new class to them, and change the element in the JavaScript call.
That worked perfect, and you can put your arrows outside the wrapper with ease with CSS.
For all my React folks out there:
If you using multiple swipers then you need to add different class names to swiper-cotainer and pagination arrows. And then create new Swiper and bind each arrows to local swiper.
This works for me, it is the same like older answer, but maybe it looks better 🙂
Put this below swiper block:
if anyone is interested I’ve found an easy work-around for this issue
position: fixed; will override the overflow:hidden; of the parent but it will make it appear relative to the root element, adding transform to the wrapper will make it relative again to the parent.
This is a general solution. To move your arrows outside the container you’ll need to first remove the arrow divs from .swiper-container .
Make another bigger container that has .swiper-container and your moved arrows. Give this bigger container position: relative as a reference to arrows that have position: absolute.
Make sure that the .swiper-container width is changed to a value smaller than 100% (e.g. 90% 95%) to avoid overlapping with the arrows.
If you like to keep the .swiper-container width same as that of the entire page width then give -ve margin to the bigger container.
This works if slidesPerView = 1:
In the wrapper function "carousel" we are using to initialize our Swiper instance we can use Swiper’s native methods slideNext and slidePrev to add event listeners explicitly to ONLY children of a shared parent element.
For this to work fully, .swiper-container, .arrow-right and .arrow-left will need to share a wrapper. In Leff’s case ".swiper-container" should work just fine:
Because this approach allows us to isolate selected elements to a shared parent container, this can be safely used as part of a block of code that might appear more than once.
This is the basic example of how to achieve it. You were close. I slightly modified the code to make it visible within the snippet.