React Swiper: slider potenti e flessibili

Utilizziamo React Swiper per creare slider reattivi e personalizzati all'interno dell'ecosistema di React

Installazione

Terminal

// npm
npm install swiper

// yarn
yarn add swiper

Se il tuo progetto utilizza TypeScript, procedi con l'installazione dei types necessari

Terminal

npm install @types/swiper

Configurazione

Importa i moduli necessari nel tuo componente React:

JavaScript

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

Per procedere correttamente nella visualizzazione di Swiper, importiamo all'interno del nostro componente gli styles necessari

JavaScript

import 'swiper/css';

Successivamente, procediamo alla creazione del nostro componente e al relativo import all'interno dell'ecosistema in cui vogliamo utilizzarlo!

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 questo caso, il nostro componente avrà una slide per view grazie all'utilizzo dell'API nativa di Swiper: slidesPerView

Puoi personalizzare il comportamento e l'aspetto del tuo slider con varie opzioni. Ecco alcuni esempi:

Navigation: aggiunge pulsanti di navigazione per spostarti tra le slide
Pagination: aggiunge paginazione cliccabile
Scrollbar: aggiunge una scrollbar trascinabile
Autoplay: configura l'autoplay per scorrere automaticamente le slide
Effect: aggiunge effetti di transizione come "coverflow".

JavaScript

pagination={{ clickable: true }}

JavaScript

scrollbar={{ draggable: true }}

JavaScript

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

JavaScript

effect={'coverflow'}

Callback e Eventi

React Swiper permette di gestire vari eventi e callback per avere maggiore controllo sul comportamento dello slider

JavaScript

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

L'API onSwiper consente di ottenere una referenza all'istanza di Swiper, permettendoti di accedere alle sue proprietà e metodi. Questo può essere utile per controllare lo slider programmaticamente.

JavaScript

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

React Swiper, inoltre, offre un hook chiamato useSwiper che permette di accedere all'istanza di Swiper in modo più comodo. Questo è particolarmente utile per controllare il comportamento dello slider da altri componenti.

Assicurati di avere già installato Swiper come mostrato nelle sezioni precedenti e aggiungi useSwiper negli import delle dipendenze

JavaScript

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

Successivamente, istanziamo useSwiper all'interno del nostro componente che verrà poi successivamente incluso all'interno del wrapper di <Swiper / >

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>
  );
};

In questo caso, l'hook useSwiper fornirà l'istanza di Swiper per accedere ai metodi di controllo, come .slideNext()

React Swiper è sicuramente una delle librerie più potenti e versatili per creare slider in applicazioni React. Con le sue numerose opzioni di configurazione e personalizzazione, è possibile creare slider unici e coinvolgenti. Provalo nella tua prossima applicazione!

React Swiper: slider potenti e flessibili

Installazione

Configurazione

Callback e Eventi

Siamo anche qui!