Swiper Slider is a modern and responsive touch slider designed for mobile and web applications. It offers a wide range of features, including smooth transitions, customizable effects, and support for various content types like images, videos, and text. With its lightweight design and touch-friendly interface, Swiper is ideal for creating engaging carousels and galleries, making it a popular choice among developers for enhancing user experience.

How to install Swiper:

npm install swiper

Here’s a simple example of using a Swiper slider:

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

const SimpleSwiper = () => {
 return (
        <Swiper spaceBetween={30} slidesPerView={1}>
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
 );
};

export default SimpleSwiper;

Here’s a Example With Pagination in a Swiper slider:

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import "swiper/css";
import 'swiper/css/pagination';

// import required modules
import { Pagination } from 'swiper/modules';

const SimpleSwiper = () => {
 return (
        <Swiper pagination={true} modules={[Pagination]} className="mySwiper">
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
          <SwiperSlide>Slide 4</SwiperSlide>
          <SwiperSlide>Slide 5</SwiperSlide>
          <SwiperSlide>Slide 6</SwiperSlide>
          <SwiperSlide>Slide 7</SwiperSlide>
          <SwiperSlide>Slide 8</SwiperSlide>
          <SwiperSlide>Slide 9</SwiperSlide>
        </Swiper>
   );
 };
  
  export default SimpleSwiper;

Here’s Example With Responsive breakpoints in a Swiper slider:

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

const SimpleSwiper = () => {
  const breakpoints = {
        640: {
              slidesPerView: 2,
              spaceBetween: 20,
        },
        768: {
              slidesPerView: 4,
              spaceBetween: 40,
        },
        1024: {
              slidesPerView: 5,
              spaceBetween: 50,
        },
  }
  
   return (
      <Swiper
          slidesPerView={1}
          spaceBetween={10}
          breakpoints={breakpoints}
          className="mySwiper"
        >
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
          <SwiperSlide>Slide 4</SwiperSlide>
          <SwiperSlide>Slide 5</SwiperSlide>
          <SwiperSlide>Slide 6</SwiperSlide>
          <SwiperSlide>Slide 7</SwiperSlide>
          <SwiperSlide>Slide 8</SwiperSlide>
          <SwiperSlide>Slide 9</SwiperSlide>
        </Swiper>
   );
  };
  
  export default SimpleSwiper;

swiper package link and more examples: https://swiperjs.com/