Swiper slider is a cool, modern & mobile-friendly slider with lots of customization options. We can create a normal slider, 3d slider, parallax slider, and many more with swiper. It also can be used in react/angular/vue js projects or in mobile apps. Let’s see how we can use it.
We can use Sweeper Slider by loading directly from CDN or installing via NPM or downloading files from GitHub to get started. Here I’m going to show you how to use it locally.
Step 1: Go to the following link and download the assets. Then add swiper-bundle.css & swiper-bundle.js files to your project folder & link them to the HTML file.
https://unpkg.com/browse/swiper@7.2.0/
Step 2: Basic HTML markup for the slider
<pre>
<code>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
</div>
<div class="swiper-pagination"></div>
</div>
</code>
</pre>
Step 3: Now it’s time to add some js code. Add following code in your js file
<pre>
<code>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
});
</code>
</pre>
That’s it. I hope your slider is working well.
To explore more options & functionality please visit the swiper slider official site https://swiperjs.com/
HAPPY CODING!!!