SwiperJS Props and Options

When working with SwiperJS in React, you can control the slider's behavior and appearance using a set of essential props. The most important SwiperJS props to understand include:

• spaceBetween: sets the amount of space, in pixels, between each slide;
• slidesPerView: determines how many slides are visible in the viewport at once;
• loop: enables continuous loop mode, allowing the slider to cycle from the last slide back to the first;
• direction: controls the direction of the slider, which can be either "horizontal" (default) or "vertical".

Each of these props can significantly change how your slider looks and behaves. For example, adjusting spaceBetween can make slides appear more separated or tightly grouped, while increasing slidesPerView allows users to see more content at once. Enabling loop creates a seamless, infinite scrolling experience, and changing direction can be useful for vertical carousels or unique layouts.

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

<Swiper
  spaceBetween={30}
  slidesPerView={3}
  loop={true}
  direction="horizontal"
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
</Swiper>

In this example, the slider will display three slides at a time, with 30 pixels of space between each slide, looping enabled, and a horizontal orientation. You can adjust these props to match your design and user experience needs. Passing these options as props is the standard way to customize SwiperJS in React.