How to Use Swiper JS in Vue Vite

Vue.js is a popular JavaScript framework for building web applications, and Vite is a lightweight development server that makes it easy to get started with Vue.js projects
Swiper is a popular JavaScript library for building touch-enabled, mobile-first carousels and sliders. swiper document here. For more in depth info, click the the below

https://swiperjs.com/vue

Create Vue Vite Application

In this section we will introduce how to scaffold a Vue Single Page Application on your local machine. The created project will be using a build setup based on Vite and allow us to use Vue Single-File Components (SFCs)

#npm init vue@latest

You will be presented with prompts for several optional features such as TypeScript and testing support.
If you are unsure about an option, simply choose NO by hitting enter for now.
Then follow the instructions.

cd <your-project-name>
npm install
npm run dev

Installing Swiper

Before we can start using Swiper, we need to install it in our project. 
We can install Swiper from NPM

$ npm install swiper

 // import Swiper JS

Setup

Now that you have the Swiper library and its Vue.js wrapper installed, you need to configure your project to use them.
You will have to import the library and the styles in your main.js file.

import {swiper, swiperSlide} from 'swiper/vue';
import swiperCore, (/* { default global options } */) from "swiper";

import "swiper/swiper.min.css";
import "swiper/css/ (/*{ default global options }*/)

swiperCore.use([/* default global options */])

Usage

In your template, you can now use the swiper component to create a slider. The swiper component accepts a number of props that allow you to customize the slider, such as options and slidesPerView.

<div id="app">
    <swiper :options="swiperOptions" :slides-per-view="3">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </div>
</template>

And you can define the options in your script part as

<script>

export default {

  name: 'App',

  data() {

    return {

      swiperOptions: {

        loop: true,

        pagination: {

          el: '.swiper-pagination',

        },

        navigation: {

          nextEl: '.swiper-button-next',

          prevEl: '.swiper-button-prev',

        },

        autoplay: {

          delay: 5000,

        },

      },

    }

  },

}

</script>

Configuring the Slider

There are many options available for configuring the Swiper slider, including options for navigation, pagination, and autoplay. Here are a few examples of options that you can use to customize the slider:

slidesPerView: This option sets the number of slides that are visible at one time.

loop: This option enables the "loop" mode, which allows the slider to loop continuously.

Pagination: This option enables the pagination feature, which allows users to navigate through the slides by clicking on a pagination button.

autoplay: This option enables the autoplay feature, which automatically advances the slides at a set interval.

speed: This option sets the duration of the transition between slides.

You can check more here
https://swiperjs.com/vue