Swiper JS Carousel Slider | How to use Swiper JS?

Carousel slider, a trend in websites that will never go out of fashion. Image Sliding on the screen always look, feels good and is also very interactive. Many big commercial websites are very good example of how trending Image Carousel is. Commercial Sites like Amazon, Tesla uses Carousel to showcase their products.

There are many carousels JavaScript frameworks Such as Owl Carousel, Slick Slider, Bootstrap, and Glider etc. But here we will discuss about Swiper JS.

Here is the Working example of Swiper JS slider

Why use Swiper JS?

Swiper is a free slider framework that allows very nice user experience. Swiper lets you build carousels slider with which user can interact with. Swiper allows mobile touch slider with hardware accelerated transition and amazing animation native affects. Though, Swiper is not compatible with every platforms but works perfectly for web pages on any browser. Swiper JS is available for normal vanilla JS, Angular, React, Vue and Svelte.

Benefits of Swiper JS

• It is very smaller and faster as it does not require any other JavaScript Libraries like JQuery.
• Very easy to use and implement.
• It allows interaction on mobile, providing touch movements for sliding.
• It has its own CSS-Style sheet which automatically recalculates the parameters for the carousel to adapt the size according to the screen.
• Many designs: Swiper gives lot of options for designs such as Lazy load image, Parallax and Vertical Sliding also.
• Animation: Swiper Carousel sliding has many transition effects.
• And many more.

How to use Swiper JS?

All the details of Swiper JS are being provided on their website. And you can look for the different Swiper Carousel designs from here. [Here]

Swiper JS Installation

We can install Swiper into out project in the following few ways:

• Using NPM
  $ npm install swiper // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/swiper-bundle.css'; const swiper = new Swiper(...);
• Using CDN
  //Swiper Style Sheet <link href="https://unpkg.com/swiper/swiper-bundle.css" rel="stylesheet"></link> <link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"></link> //Swiper JavaScript <script src="https://unpkg.com/swiper/swiper-bundle.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
• Download assets

  You can also directly download the Swiper assets from https://unpkg.com/swiper/

Add the Swiper HTML Layout

Add the basic Swiper Layout where you want to implement the slider.

Add the Custom styling if required.

Though there is a style-sheet of Swiper but still if you want to manually customize the width or height of the carousel image or container, you can add your custom style like this.

Initialize Swiper

Finally add JavaScript to initialize the Swiper.

So here we wrap up this article, I hope you got an insight of how to use Swiper JS for making interative sliding carousal. Use Swiper JS carousal in projects and enjoy.