
Although there are many javascript libraries which can make a silder, swiper.js is the one of the most popular library which dose not require jQuery.
In this article, I will show you how to create a simple responsive slider with swiper.js
①load required libraries from CDN
<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>
The above are latest version at this point(September 2022).
You can always check latest version of swiper.js on the official website.
https://swiperjs.com/get-started#use-swiper-from-cdn
②HTML : prepare required parts for swiper slider
<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>
Otherwise the layout may be skewed or slider may not work.
③Javascript : create a slider
const swiper = new Swiper('.sample-slider', {
loop: true, //loop
autoplay: { //autoplay
delay: 2000,
},
pagination: { //pagination(dots)
el: '.swiper-pagination',
},
navigation: { //navigation(arrow)
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
Now we can see a simple slider! All that is left is fixing the style with css.
④CSS : fixing the style with css
Let’s adjust slider width by CSS.
By using % instead of px for its width, the slider would be responsive.
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
Now the simple responsive slider has been completed!
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>
.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(arrow)
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>
That’s all, it was about How to create a simple responsive slider with swiper.js
If you want to know about swiper slider, below articles might be helpful.
[Swiper]How to customize arrows of Swiper slider
[Swiper]How to customize pagination of Swiper slider
If you are interested in how various slider can be made by swiper.js, please refer below article.
Swiper Demo 16 Slider