In this article, I am going to describe how to put arrows and dots outside of swiper slider with demo.
I’ｍ going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper] How to create a simple slider with swiper.js
Table of Contents
①Create a normal swiper slider
To make it crear, we will create normal swiper slider first and then make changes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //loop
autoplay: { //autoplay
delay: 2000,
},
pagination: { //pagination(dots)
el: '.swiper-pagination',
},
navigation: { //navigation(arrows)
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>
②Change structure of HTML
As default, overflow:hidden is set to swiper class and this is indispensable for swiper slider.
So I move arrows and dots to outside of slider and add parent div.
<div class="swiper-container"> <!-- add -->
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
<!--<div class="swiper-pagination"></div>--> <!-- remove -->
<!--<div class="swiper-button-prev"></div>--> <!-- remove -->
<!--<div class="swiper-button-next"></div>--> <!-- remove -->
</div>
<div class="swiper-pagination"></div> <!-- add -->
<div class="swiper-button-prev"></div> <!-- add -->
<div class="swiper-button-next"></div> <!-- add -->
</div> <!-- add -->Arrows and dots has gone because position:absolute is set to them.
We need to make some changes to CSS.
③Adjust postion of arrows and dots by CSS
2nd line is adding position:relative.(to put arrows and dots at default position)
7th and 10th line is adjusting position of arrows.
13th line is adjusting position of dots.
.swiper-container{
position: relative;
width: 70%;
margin: 0 auto;
}
.swiper-container .swiper-button-prev{
left: -40px;
}
.swiper-container .swiper-button-next{
right: -40px;
}
.swiper-container .swiper-pagination{
bottom: -30px!important;
}
.sample-slider{
/* width:70%; */ /* remove */
}Now arrows and dots has been put outside of slider
The full text of source code
In the end, I put the full text of source code.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.swiper-container{
position: relative;
width: 70%;
margin: 0 auto;
}
.swiper-container .swiper-button-prev{
left: -40px;
}
.swiper-container .swiper-button-next{
right: -40px;
}
.swiper-container .swiper-pagination{
bottom: -30px!important;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper-container">
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //loop
autoplay: { //autoplay
delay: 2000,
},
pagination: { //pagination(dots)
el: '.swiper-pagination',
},
navigation: { //navigation(arrows)
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>That is all, it was about how to put arrows and dots outside of swiper slider.
This works if you have only one slider on the page, but if you have multiple sliders then the buttons will control all sliders at once
Thanks for your comment, kaoquan.
I tried to reproduce that bug in my development environment, but I couldn’t.
So could you please give me the full source code which you tried?