Swiper

There are few options on how to include/import Swiper into your project:

Install from NPM

import SCSS in the src/assets/scss/plugins.scss file

npm install swiper

import Package and Css file

@import 'swiper/swiper-bundle.css';

We can install Swiper from NPM

import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';

import 'swiper/css/pagination';

Below the example how to use the package and make it working swiper on any page.

Code

 <Swiper
    spaceBetween="10"
    slidesPerView="1"
    autoplay="true"
    loop="true"
    modules="[Pagination, Autoplay]"
    pagination="{ clickable: true, el: '.swiper-pagination' }"
    className="productSlider"
    dir="ltr"
>
     <div className="swiper-wrapper">
        <SwiperSlide>
          ...
        </SwiperSlide>
        <SwiperSlide>
          ...
        </SwiperSlide>
        <SwiperSlide>
          ...
        </SwiperSlide>
        </div>
            <div className="swiper-pagination"></div>
        </Swiper>
    </div>   
</Swiper>