Bharathy-Ramesh
commented
8 months ago I'm closing this issue. Because found a solution for this. I like this package to use in my project. This is the solution i found. But Not sure this is the correct solution. It would be great if any suggestion or correction on this. useEffect(() => { instanceRef.current?.moveToIdx(0); }, [imageSlides]);
I am using keen slider for nextjs project. I'm receiving image details from API and stored in a state(imageSlides) of the component and passing the state to child component. images are separated by category name. When I am filtering the image based on category, state(imageSlides) will be updated. I want to reinitialize the slider whenever changes occurs in state(imageSlides) and also displaying index of the image.
version: ^6.8.6
Actual: After updating state image index is not 0. It shows last index or someother index along with images. Expected: After updating state image index should be 0.(reinitialize should happen).
@rcbyr Please guide me how can i achieve this?
export default function BannerSlider({ showCaption = true, imageSlides }) { const [currentSlide, setCurrentSlide] = useState(0); const [loaded, setLoaded] = useState(false); const [sliderRef, instanceRef] = useKeenSlider({ slides: imageSlides, loop: true, defaultAnimation: { duration: 1700, }, detailsChanged(s) { setCurrentSlide(s.track.details.rel); }, created() { setLoaded(true); }, });