.swiper-container {
width: 100%;
height: 300px;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}

Using SwiperJS in React

SwiperJS is a powerful and customizable carousel/slider library that can be easily integrated into React applications. In this article, we will explore how to use react-swiperjs to create a carousel in a React component.

Installation

To get started, we need to install the react-swiperjs package:

npm install react-swiperjs

Usage

Once the package is installed, we can import and use the Swiper component in our React application.

// App.jsx
import React from 'react';
import { Swiper, SwiperSlide } from 'react-swiperjs';

function App() {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
    </Swiper>
  );
}

export default App;
  

Customization

The Swiper component can be customized with various props such as spaceBetween and slidesPerView to control the spacing and number of visible slides, respectively.

Complete Example

Here is a complete example of a React component using react-swiperjs to create a carousel:

// App.jsx
import React from 'react';
import { Swiper, SwiperSlide } from 'react-swiperjs';
import 'swiper/swiper-bundle.min.css';

function App() {
  return (
    <div>
      <h1>My Carousel</h1>
      <Swiper
        spaceBetween={30}
        slidesPerView={3}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
      </Swiper>
    </div>
  );
}

export default App;
  

Conclusion

SwiperJS is a versatile carousel library that can be seamlessly integrated into React applications using the react-swiperjs package. With its easy-to-use API and extensive customization options, creating dynamic and interactive carousels in React has never been easier.