Swiper — Relocating Previous and Next Buttons
While creating a demo for Swiper — Uno a Cuatro Column Slider I was curious to know if previous and next buttons would work when relocated outside of Swiper’s container. I discovered it is doable, only a few changes are needed; but there is a catch.
The updated demo still has the same functionality—one slide is centered and two adjacent slides hang off the screen to encourage users to swipe left or right. As the viewport enlarges, left and right arrows appear.
The previous approach had an issue. Every dozen or so pixels part of a hidden photograph appeared when resizing.
Update: Read Swiper — Jumping on Page Load Resolved after finishing this tutorial.
The updates
The previous and next buttons were moved below the container’s closing div.
<!-- slider main container -->
<div class="swiper-container">
...
</div><!-- navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
Then swiper-container and the buttons were nested inside a lunchbox container. (I was thinking of lunch about this time.)
<div class="lunchbox"> <!-- slider main container -->
<div class="swiper-container">
...
</div> <!-- navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div></div>
HTML from the previous tutorial…
<!-- slider main container -->
<div class="swiper-container">
... <!-- navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div></div>
Afterwards a bunch of styles were adjusted. The lunchbox selector was set to relative to assist the positioning of the previous and next arrows. Padding created room for the arrows.
.lunchbox {
position: relative;
}@media (min-width: 37.5em) {
.lunchbox {
margin-left: auto;
margin-right: auto;
width: 92%; /* make room for arrows */
padding-left: 2em;
padding-right: 2em;
}
}@media (min-width: 43.75em) {
.lunchbox {
width: 95%;
}
}
The 43.75em breakpoint was removed from the swiper-wrapper selector.
.swiper-wrapper {
/* now pagination is below slides */
margin-bottom: 3em; /* just enough width so slides handing off screen are partially
visible */
width: 73.8%;
}@media (min-width: 37.5em) {
.swiper-wrapper {
width: 100%;
}
}
CSS from the previous tutorial…
.swiper-wrapper {
/* now pagination is below slides */
margin-bottom: 3em; /* just enough width so slides handing off screen are partially
visible */
width: 73.8%;
}@media (min-width: 37.5em) {
.swiper-wrapper {
/* now arrows appear */
/* make room for arrows */
width: 92%;
}
}@media (min-width: 43.75em) {
.swiper-wrapper {
/* make room for arrows */
width: 95%;
}
}
Since the arrows are outside Swiper’s container, the background color is not needed to hide photography anymore.
.swiper-button-prev {
...
/* background-color: #fff; */
}.swiper-button-next {
...
/* background-color: #fff; */
}
The Catch
When the previous and next arrows are placed outside the swiper-container element, adding an additional slider to the page caused conflicts—the last slider controlled all others. To prevent a potential conflict, class selectors were replaced with ID selectors and js- hooks. By doing so, it flags this script as single-use only.
HTML
...<div id="swiper1" class="swiper-container">...<!-- navigation buttons -->
<div id="js-prev1" class="swiper-button-prev"></div>
<div id="js-next1" class="swiper-button-next"></div>
JS
const mySwiper = new Swiper ('#swiper1', { ...
// navigation arrows
nextButton: '#js-prev1',
prevButton: '#js-next1',
});
That’s it! Visit the CodePen demo for boilerplate.
Conclusion
Even with the extra div container, styles, and adjustments to Swiper I prefer this approach. It has yet to make it’s way to production so I’ll be back to update the article if bugs are found. Best of luck!
