To create your first SwiperJS slider in a React component, start by importing the necessary components from the Swiper library. The two core components you will use are Swiper and SwiperSlide. Here is a minimal example of how to set up a basic SwiperJS slider with three slides in a React component:

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

function BasicSlider() {
  return (
    <Swiper>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}

export default BasicSlider;

When you render the BasicSlider component, you will see a horizontal slider with three slides. By default, SwiperJS provides basic touch and mouse drag functionality, allowing you to swipe between slides.

The Swiper component acts as the main container for your slider. It is responsible for initializing the slider, handling slide transitions, and managing slider-level options. You can pass various props to Swiper to control its behavior, such as the number of slides visible, spacing, and navigation options.

The SwiperSlide component represents an individual slide within the slider. Each SwiperSlide is a child of the Swiper component and holds the content you want to display on that slide, such as text, images, or other React elements.

Some commonly used props for Swiper include:

• spaceBetween: sets the space in pixels between slides;
• slidesPerView: determines how many slides are visible at once;
• loop: enables continuous loop mode for the slider.

The SwiperSlide component does not require any special props for basic usage, but you can add custom content or styles as needed.