Есть такой код для кастомного слайдера, с применением 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>
)
}