Swiper is the most advanced free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is designed to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Swiper is not compatible with all platforms. It is a modern touch slider that is focused only on modern apps/platforms to bring the best experience and simplicity. You can view its demos here.

Features

It has many amazing features:

• Library Agnostic
• Touch movement
• Mutation Observer
• Rich API
• Full True RTL Support
• Multi-Row Slides Layout
• Transition Effects
• Two-way Control
• Full Navigation Control
• Flexbox Layout
• Parallax Transitions
• Images Lazy Loading
• Virtual Slides

Installation

You can install Swiper from Npm by running this command:

npm install swiper

Usage

After Installation, You have to add this code in your vue component.

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>

<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

Modules

Here is the list of additional modules imports:

• Virtual - Virtual Slides module
• Keyboard - Keyboard Control module
• Mousewheel - Mousewheel Control module
• Navigation - Navigation module
• Pagination - Pagination module
• Scrollbar - Scrollbar module
• Parallax - Parallax module
• FreeMode - Free Mode module
• Grid - Grid module
• Manipulation - Slides manipulation module (only for Core version)
• Zoom - Zoom module
• Lazy - Lazy module
• Controller - Controller module
• A11y - Accessibility module
• History - History Navigation module
• HashNavigation - Hash Navigation module
• Autoplay - Autoplay module
• EffectFade - Fade Effect module
• EffectCube - Cube Effect module
• EffectFlip - Flip Effect module
• EffectCoverflow - Coverflow Effect module
• EffectCards - Cards Effect module
• EffectCreative - Creative Effect module
• Thumbs - Thumbs module

Styles

Swiper package contains different sets of CSS, Less, and SCSS styles:

• swiper/css - only core Swiper styles
• swiper/css/bundle - all Swiper styles including all modules styles (like Navigation, Pagination, etc.)

For Less styles replace css with less in imports paths, e.g.:

import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';

For SCSS styles replace css with scss in imports paths, e.g.:

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

Closing Notes

As you see, it is very straightforward to integrate Swiper into your website or application. You can also utilize Swiper with React, Angular, and Svelte. So if you want to dig more about it, you can visit its extensive documentation on its official website.