SwiperJS Events in React

When building interactive sliders with SwiperJS in React, you often need to respond to events triggered by user actions or slider state changes. SwiperJS provides a set of common events that you can listen to and handle within your React components. Here is a list of some of the most frequently used SwiperJS events:

• onSwiper: fires when the Swiper instance is initialized;
• onSlideChange: fires when the active slide changes;
• onReachEnd: fires when the last slide is reached;
• onReachBeginning: fires when the first slide is reached;
• onSlideNextTransitionStart: fires when the transition to the next slide starts;
• onSlidePrevTransitionStart: fires when the transition to the previous slide starts.

To handle a SwiperJS event in React, you typically pass an event handler as a prop to the Swiper component. For example, you may want to update local React state whenever the active slide changes. Here is how you can use the onSlideChange event to keep track of the current slide index:

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

function SliderWithEvent() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div>
      <Swiper
        onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
      </Swiper>
      <p>Current Slide: {activeIndex + 1}</p>
    </div>
  );
}

In this example, the onSlideChange event handler receives the Swiper instance as an argument. You can use swiper.activeIndex to get the current slide index and update your component's state accordingly. This approach lets you synchronize your UI with the Swiper slider's current position.