React-id-swiper: onIndexChanged

[tigpalmas]

i need to track the index but found nothing like onIndexChanged. How can i do that ? Thanks

[jere-co]

This should work:

import React, { useState, useEffect } from "react";
import Swiper from "react-id-swiper";
//
export default ({ children }) => {
  const [swiper, setSwiper] = useState(null);
  const [currentIndex, updateCurrentIndex] = useState(0);

  const config = {
    // Swiper config
  };

  useEffect(() => {
    if (swiper !== null) {
      swiper.on("slideChange", () => updateCurrentIndex(swiper.realIndex));
    }

    return () => {
      if (swiper !== null) {
        swiper.off("slideChange", () => updateCurrentIndex(swiper.realIndex));
      }
    };
  }, [swiper]);

  console.log({ currentIndex });

  return (
    <Swiper getSwiper={setSwiper} {...config}>
      {/* Loop over React children or do whatever to create your slides */}
      {children.map((Child, sliceIndex) => (
        <div key={sliceIndex}>{Child}</div>
      ))}
    </Swiper>
  );
};