To begin using SwiperJS in your React project, you will need to install both the core SwiperJS library and the official React components. The recommended way to do this is by using either npm or yarn, depending on your package manager of choice. Open your terminal, navigate to your project directory, and run one of the following commands:

If you are using npm, enter:

npm install swiper

If you prefer yarn, use:

yarn add swiper

These commands will add SwiperJS and its React integration to your node_modules folder, and update your package.json file accordingly. Once installed, you will be able to import Swiper components and styles directly into your React components.

After installation, it is helpful to understand how SwiperJS is structured within your project. Inside your node_modules directory, you will find a swiper folder. This folder contains several key files and subfolders:

• The swiper directory includes the main JavaScript files for Swiper's core functionality;
• The react subfolder provides the React-specific components, such as Swiper and SwiperSlide, which you will import into your React application;
• The css subfolder contains ready-to-use CSS files for Swiper's default styles, which you can import to quickly style your sliders;
• Documentation and type definitions are also present to assist with development.

You typically do not need to modify anything inside node_modules/swiper directly. Instead, you will import the necessary components and styles into your own source files. For example, you might add the following imports at the top of your slider component:

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

This approach keeps your project organized and leverages Swiper's modular structure for React development.