Swiper is an open-source, free, and modern mobile touch slider JavaScript library with hardware accelerated transitions and amazing native behaviors. Swiper has been build with mobile browsing in mind so it works on mobile web apps, mobile native/hybrid apps and mobile websites.

As now Swiper don’t is not compatible with all platforms. Its is a modern touch slider that has been build for easy of use and modern web/app experience focus. So make sure you use the latest version of browser.

Getting Started

Swiper can be installed through a CDN ( Content Delivery Network ) or using NPM.

npm

npm install swiper

Use Swiper from CDN

just copy and paste the CSS link into the head of you html page, and the script before the body closing tag.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Initializing Swiper API

For Swiper to work we need a minimal required code in HTML CSS and JavaScript.

HTML

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

The div element with class swiper-slide is where you place your slides.

CSS

.swiper-container {
    width: 600px;
    height: 300px;
}

this code sets a width and hight for Swiper container div tag.

JavaScript

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

Now, when we have Swiper’s HTML, we need to initialize it using the following function:

new Swiper(swiperContainer, parameters) - initialize Swiper with options.

• swiperContainer — HTMLElement or string (with CSS selector) of Swiper container HTML element. Required.
• parameters — object — object with Swiper parameters. Optional.
• The method returns the initialized Swiper instance.

Events

Swiper comes with a bunch of useful events you can listen to. Events can be assigned in two ways:

1. Using the on parameter on swiper initialization:

   const mySwiper = new Swiper('.swiper-container’, { // … on: { init: function () { console.log(‘swiper initialized’); } }, };

2. Using the on method after Swiper initialization.

const mySwiper = new Swiper('.swiper-container', {     // ... }; mySwiper.on('slideChange', function () {     console.log('slide changed'); });

Note: The this keyword within the event handler always points to the Swiper instance.

What’s Next?

After you found out how mush it is easy to implement Swiper into your project what is left is to :

• Check the API documentation to learn more about the Swiper API and how to control it.
• Look at available demos.
• If you have questions about Swiper, ask them in Stack Overflow and don’t forget to tag your question with the swiper tag.
• Create an issue on GitHub if you’ve found a bug.

Conclusion

Swiper is an easy way and effective way to implement a slider with high and customizable functionalities so you want lost to mush time on building a slider from the ground up as it can be tedious to get it working the way you want. With Swiper you just have to think about the styling for your slides, If you are a Full Stack Developer Like myself I recommend you to start using as it cuts allot of time and efforts for you projects.

Thanks for reading, I hope you learned something new. Remember, as developers, we constantly have to be open and welcome new tools and libraries that make our lives easier.