import { Swiper as SwiperClass } from 'swiper/types';
import { Swiper, SwiperSlide } from 'swiper/react';
export const MySwiper = () => {
const [swiperRef, setSwiperRef] = useState<SwiperClass>();
const theSlides = useMemo(()=> ['slide one', 'slide two'], [])
const handlePrevious = useCallback(() => {
swiperRef?.slidePrev();
}, [swiperRef]);
const handleNext = useCallback(() => {
swiperRef?.slideNext();
}, [swiperRef]);
return (
<div>
<div>
<button onClick={handlePrevious }>
previous
</button>
</div>
<Swiper
onSwiper={setSwiperRef}
>
{theSlides.map((slide) => (<SwiperSlide key={slide}>{slide}</SwiperSlide>)
</Swiper>
<div>
<button onClick={handleNext}>
Next
</button>
</div>
</div>
);
};