Question posted in 
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:
.swiper-container {
margin-top: 50px;
position: relative;
}
.arrow-left {
position: absolute;
top: 50%;
left: 0;
}
.arrow-right {
position: absolute;
top: 50%;
right: 0;
}
Html looks like this:
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
@foreach($videos as $video)
<div class="swiper-slide video-card">
<header class="card__thumb">
<a href="/player/{{ $player->id }}/video/{{ $video->id }}"><img src="{{ $video->getThumbnail() }}"/></a>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
{{ $video->created_at->diffForHumans() }}
</small>
<span class="video-title">
<p>
@if($video->title != '')
{{ $video->title }} <i class="ion-arrow-right-c"></i>
@else
Untitled
@endif
</p>
</span>
</div>
</div>
@endforeach
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
And this is the script:
var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};
$(document).ready(function () {
carousel();
});
15
Answers
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.
This works for me, it is the same like older answer, but maybe it looks better 🙂
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.Example:
That worked perfect, and you can put your arrows outside the wrapper with ease with CSS.
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-containerand your moved arrows. Give this bigger containerposition: relativeas a reference to arrows that have position: absolute.Make sure that the
.swiper-containerwidth 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-containerwidth same as that of the entire page width then give -ve margin to the bigger container.Ok, I had another method,
What the guys suggesting will not work with multiple sliders on page.
So, I added another two arrows, which will trigger the real arrows.
the swiper had:
{
navigation: {
nextEl: ‘.xnext’,
prevEl: ‘.xprev’,
}
}
This works if slidesPerView = 1:
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.
Just stumbled upon this issue today, here’s my attempt at solving it. Basically it only requires you wrapping
.swiper-containerinside additional.swiper-container-wrapper, as Swiper allows passing references toHTMLElementinstead of selector string. And you also get to keep the class names, no discrete classes required for navigation elements or container.At this point both navigation elements are placed inside
.swiper-container-wrapper, as.swiper-container‘s siblings.Put this below swiper block:
if anyone is interested I’ve found an easy work-around for this issue
position: fixed;will override theoverflow:hidden;of the parent but it will make it appear relative to the root element, addingtransformto the wrapper will make it relative again to the parent.For all my React folks out there:
The code below help to use more than one swiper, using one class. (At first I was used this in a php loop of swipers)
I’m using react so I didn’t want to go through the trouble of creating new event handlers for each of the toggles. I came up with a solution where you just add an extra div wrapper to the slide content and add padding:
html
css
The padding within the slide will create a gap with the .video-card-inner element that will house all of your content, thus allowing the arrows to sit outside of your visible content. You can still achieve this with custom toggles, but it will also work with their default toggles.
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.
With Bootstrap 5.1 you can do the following:
You need the flex order feature (order-1, order-2, order-3 classes) in order to get the icons assigned correctly by the swiper js. Ate least without it it won’t worked for me.
Don’t forget to have the navigation assigned to the icons when you initialize swiper with the js: