How to use react Swiper?

Live example

This is an example of how I implemented it on my e-commerce website, Roomy.

Copy and paste the code

This is all that you will need 90% of the time using React Swiper. We will not complicate it, It's really simple, and I won't go into too many technical details. In most cases, you'll find this swiper useful. If you want to explore how React Swiper works in-depth, check out their documentation.

JSX

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
// import 'swiper/css/pagination';
import "swiper/css/navigation";
import { Navigation, Pagination } from "swiper/modules";

export default function Home() {
  return (
    <>
      <Swiper
        spaceBetween={10}
        navigation={true}
        loop={true}
        // pagination={true}
        modules={[
          Navigation,
          // Pagination
        ]}
        className="swiper"
        //make styles in css
        //or just use tailwind
        // className="max-w-[500px] mb-20 mt-20"
        breakpoints={{
          450: {
            slidesPerView: 1,
          },
          630: {
            slidesPerView: 2,
          },
          920: {
            slidesPerView: 3,
          },
          1520: {
            slidesPerView: 4,
          },
        }}
      >
        {/* <SwiperSlide>SLIDE 1</SwiperSlide> */}
        {/* <SwiperSlide>SLIDE 2</SwiperSlide> */}
        {/* <SwiperSlide>SLIDE 3</SwiperSlide> */}
        {/* <SwiperSlide>SLIDE 4</SwiperSlide> */}
        {/* <SwiperSlide>SLIDE 5</SwiperSlide> */}
        <div>
          {products.map((product, i) => (
            <SwiperSlide key={i}>
              //if you have product._id its allways
              //better to use like that, not with index
              <Card product={product} />
            </SwiperSlide>
          ))}
        </div>
      </Swiper>
    </>
  );
}

CSS

//css
.swiper {
    .swiper-slide {
      img {
        border-radius: 0 !important;
        height: 320px !important;
      }
    }
    .swiper-button-next {
      color: $violet-color;
    }
    .swiper-button-prev {
      color: $violet-color;
    }
    .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      opacity: 1;
      background: rgba(0, 0, 0, 0.2);
      transform: translateY(6px);
    }
    @media (max-width: 450px) {
      .swiper-button-next,
      .swiper-button-prev {
        display: grid !important;
      }
    }
  }

Code explanation

Install the package

Using npm with the command "npm install swiper", or if you prefer Yarn, use "yarn add swiper". Now, import Swiper and SwiperSlide from the package into your project.

Import the modules you want to use.

In this example, we used only Navigation, but you can also check out Pagination in their documentation for more options. Feel free to copy and paste the code I provided and play around with it as you like.

Wrap your content inside the Swiper component and assign the desired properties to it.

The names of the properties are self-explanatory, and it's straightforward to create a responsive slider using breakpoints. By setting loop={true}, you can make the slider loop endlessly. Also, the spaceBetween property allows you to adjust the space between slides.

Custom Styles for React Swiper

If you wish to style the navigation arrows, you can target them using: .swiper-button-next, .swiper-button-prev, for styling bullets in pagination, you can use the .swiper-pagination-bullet and .swiper-pagination-bullet-active classes.

With Tailwind CSS

I couldn't find if this can be achieved using Tailwind CSS, so if anyone knows how, please share your insights.