@eternal-struggler
Backend Node.js разработчик

Как типизировать объект Swiper?

Есть такой код для кастомного слайдера, с применением Swiper.
Везде под комментариями с @ts-ignore появляются ошибки типизации.
Какой дженерик можно передать в useState? Как вообще можно было бы сделать тут типизацию?

export function Carousel({ links }: Props) {
  const [swiperInstance, setSwiperInstance] = useState()
  const [activeButtonIndex, setActiveButtonIndex] = useState(0)

  const onPaginationButtonClick = (index: number) => {
    // @ts-ignore
    swiper.slideTo(index)
    setActiveButtonIndex(index)
  }

  return (
    <div className="flex flex-col items-center justify-center">
      <Swiper
        className="lg:max-h-[356px] md:max-h-[430px] mb:max-h-[213px]"
        // @ts-ignore
        onSwiper={(swiper) => setSwiperInstance(swiper)}
        // @ts-ignore
        onSlideChange={() => setActiveButtonIndex(swiperInstance.activeIndex)}
        modules={[Pagination]}
        pagination={{ el: 'custom_pagination', clickable: true }}>
        {links.map((link, id) => (
          <SwiperSlide key={id}>
            <img className="w-full h-full mb-[-10px] p-0 border-0" src={link} />
          </SwiperSlide>
        ))}
      </Swiper>
      <div className="custom_pagination flex gap-4 relative bottom-8 mb-4">
        {links.map((_, index) => (
          <svg
            className="cursor-pointer"
            onClick={() => onPaginationButtonClick(index)}
            width="9"
            height="9"
            viewBox="0 0 8 9"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <rect
              y="0.413086"
              width="8"
              height="8"
              rx="4"
              fill={activeButtonIndex === index ? '#FC4814' : '#000'}
            />
          </svg>
        ))}
      </div>
    </div>
  )
}
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы