import React, { useRef } from 'react';
import Swiper from 'react-id-swiper';
const ManipulatingComponentOutSideSwiper = () => {
const swiperRef = useRef(null);
const goNext = () => {
if (swiperRef.current && swiperRef.current.swiper) {
swiperRef.current.swiper.slideNext();
}
};
const goPrev = () => {
if (swiperRef.current && swiperRef.current.swiper) {
swiperRef.current.swiper.slidePrev();
}
};
return (
<div>
<Swiper ref={swiperRef}>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</Swiper>
<button onClick={goPrev}>Prev</button>
<button onClick={goNext}>Next</button>
</div>
);
};
export default ManipulatingComponentOutSideSwiper;