Как достучаться до конкретного слайдера в Swiper? (нужно получить индекс для работы табов)

Нужно, чтобы функция срабатывала с конкретным индесом (id) слайдера срабатывала в момент постановки слайдера, а не на onClick. P.s. в API вижу фигу...

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import './TabsSwiper.scss';
import { Navigation } from 'swiper/modules';

const navigatePanel = [
  { label: 'Исследования', id: '1' },
  { label: 'Дизайн', id: '2' },
  { label: 'Разработка', id: '3' },
  { label: 'Тестирование', id: '4' },
  { label: 'Аутстафф', id: '5' },
  { label: 'Поддержка', id: '6' },
];
type TabsSwiperPropsType = {
  handleTabClick: (index: string) => void;
};

const TabsSwiper: React.FC<TabsSwiperPropsType> = ({ handleTabClick }) => {
  return (
    <Swiper
      modules={[Navigation]}
      navigation
      loop
      onSlideResetTransitionEnd={function () {
        console.log('*** mySwiper.realIndex', Swiper);
      }}
      onSlideChange={() => console.log('slide change')}
    >
      {navigatePanel.map((item) => {
        return (
          <div key={item.id} className="swiperContainer">
            <SwiperSlide>
              <p
                onClick={() => {
                  handleTabClick(item.id);
                }}
              >
                {item.label}
              </p>
            </SwiperSlide>
          </div>
        );
      })}
    </Swiper>
  );
};

export default TabsSwiper;

Ответы (1 шт):

Автор решения: Vadim Lyutsko

Оказалось просто: можно использовать realIndex и useState

          handleTabClick(e.realIndex.toString());
        }}
→ Ссылка