Swiper is a free and advanced mobile touch slider that features hardware-accelerated transitions and superior native behavior. It's primarily designed for mobile websites, mobile web apps, and mobile native/hybrid apps. Note that Swiper is focused on modern platforms only, striving to deliver the best user experience and simplicity.

How do you use swiper?

To use Swiper, you need to follow the Getting Started Guide provided on the Swiper website. Here's an example of how you can integrate Swiper into your project:

First, install Swiper using npm:

npm install swiper

Then, import Swiper CSS and JS into your file:

import 'swiper/swiper-bundle.css';
import Swiper from 'swiper';

You can now initialize Swiper in your app:

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  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',
  },
});

You can customise the elements and settings based on your requirements. The structure of your HTML will also be important in order to correctly apply the Swiper functionality.

Where are the swiper docs?

Extensive documentation for Swiper, including the Getting Started Guide and API documentation, is available on the Swiper website at https://swiperjs.com. There, you can find detailed explanations and demos to help you implement and fully utilise the Swiper package in your projects.