React Swiper: powerful and flexible sliders

Using React Swiper to create responsive and customized sliders within the React ecosystem

Published

18/06/2024

Reading Time

8 min

Creating interactive and customized sliders can be a challenge, but with React Swiper, it's possible to do it simply and quickly!

Installation

Terminal

// npm
npm install swiper

// yarn
yarn add swiper

Terminal

// npm
npm install swiper

// yarn
yarn add swiper

If your project uses TypeScript, proceed with installing the necessary types

Terminal

npm install @types/swiper

Terminal

npm install @types/swiper

Configuration

Import the necessary modules in your React component:

JavaScript

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

JavaScript

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

To proceed correctly in displaying Swiper, let's import the necessary styles into our component

JavaScript

import 'swiper/css';

JavaScript

import 'swiper/css';

Next, let's proceed with creating our component and its import into the ecosystem where we want to use it!

JavaScript

const Slider = () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={1}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
};

JavaScript

const Slider = () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={1}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
};

In this case, our component will have one slide per view thanks to the use of Swiper's native API: slidesPerView

You can customize the behavior and appearance of your slider with various options. Here are some examples:

Navigation: adds navigation buttons to move between slides
Pagination: adds clickable pagination
Scrollbar: adds a draggable scrollbar
Autoplay: configures autoplay to automatically scroll through slides
Effect: adds transition effects like "coverflow".

JavaScript

pagination={{ clickable: true }}

JavaScript

pagination={{ clickable: true }}

JavaScript

scrollbar={{ draggable: true }}

JavaScript

scrollbar={{ draggable: true }}

JavaScript

autoplay={{ delay: 2500, disableOnInteraction: false }}

JavaScript

autoplay={{ delay: 2500, disableOnInteraction: false }}

JavaScript

effect={'coverflow'}

JavaScript

effect={'coverflow'}

Callbacks and events

React Swiper allows managing various events and callbacks to have greater control over slider behavior

JavaScript

<Swiper
  onSlideChange={() => console.log('Slide changed')}
  onSwiper={(swiper) => console.log('Swiper initialized', swiper)}
>

JavaScript

<Swiper
  onSlideChange={() => console.log('Slide changed')}
  onSwiper={(swiper) => console.log('Swiper initialized', swiper)}
>

The onSwiper API allows you to get a reference to the Swiper instance, allowing you to access its properties and methods. This can be useful for controlling the slider programmatically.

JavaScript

<Swiper
  onSwiper={(swiper) => {
    // Avvia l'autoplay dopo l'inizializzazione
    swiper.autoplay.start();
    console.log(swiper);
  }}
>

JavaScript

<Swiper
  onSwiper={(swiper) => {
    // Avvia l'autoplay dopo l'inizializzazione
    swiper.autoplay.start();
    console.log(swiper);
  }}
>

React Swiper also offers a hook called useSwiper that allows accessing the Swiper instance more conveniently. This is particularly useful for controlling slider behavior from other components.

Make sure you have already installed Swiper as shown in the previous sections and add useSwiper in the dependency imports

JavaScript

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

JavaScript

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

Next, let's instantiate useSwiper inside our component which will then be included inside the wrapper

JavaScript

const NextButton = () => {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide successiva</button>
  );
};

JavaScript

const NextButton = () => {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide successiva</button>
  );
};

JavaScript

const Slider = () => {
  return (
    <Swiper
      slidesPerView={1}
      navigation
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <NextButton />
    </Swiper>
  );
};

JavaScript

const Slider = () => {
  return (
    <Swiper
      slidesPerView={1}
      navigation
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <NextButton />
    </Swiper>
  );
};

In this case, the useSwiper hook will provide the Swiper instance to access control methods, like .slideNext()

React Swiper is definitely one of the most powerful and versatile libraries for creating sliders in React applications. With its numerous configuration and customization options, it's possible to create unique and engaging sliders. Try it in your next application!