In this blog, we will learn about swiper.js by building a simple carousel image slider app. ## Video Tutorial I have made a video about this on my youtube channel. {% youtube EJsmCDol9iA %} Please like and subscribe to my channel. It motivates me to create more content like this. ## Demo {% codepen https://codepen.io/thatanjan/pen/jOayYjd %} ## Setup ```html ``` ## Html Layout ```html

``` ```css * { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 100vw; overflow-x: hidden; } .container { background-color: #292929; display: grid; place-items: center; min-height: 100vh; } .swiper { width: 80%; } .image__wrapper { width: 100%; position: relative; padding-top: 56.25%; } .image__wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } ``` Explanation: 1. we have a main swiper container. Then a wrapper for all the slides. 2. All the images are responsive by maintaining a specific aspect ratio. If you want to learn how to do that, please watch the following video. {% youtube YYxfwDWuPmc %} ```javascript const swiper = new Swiper('.swiper', { loop: true, // creates a infinite loop of slides navigation: { // activate navigation with navigation buttons nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: {// activate paginations el: '.swiper-pagination', type: 'bullets', clickable: true, }, // keyboard and mousewheel navigation keyboard: true, mousewheel: true, // for other than sliding effect // effect: 'creative', // creativeEffect: { // prev: { // // will set `translateZ(-400px)` on previous slides // translate: [0, 0, -400], // }, // next: { // // will set `translateX(100%)` on next slides // translate: ['100%', 0, 0], // }, // }, // effect: 'coverflow', }) ``` Explanation: 1. We need to create a new instance of `Swiper`. We can also pass options to customize. Please read more from the [docs](https://swiperjs.com/swiper-api) That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

anjan18

How to build a carousel image slider with swiper.js

Join Our Newsletter. No Spam, Only the good stuff.