diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx index fcd99bef..501eef34 100644 --- a/src/components/node/NodeImageSwiperBlock/index.tsx +++ b/src/components/node/NodeImageSwiperBlock/index.tsx @@ -45,23 +45,12 @@ const NodeImageSwiperBlock: FC = ({ node }) => { controlledSwiper.updateProgress(); }, [controlledSwiper]); - // const resetSwiper = useCallback(() => { - // if (!controlledSwiper) return; - // controlledSwiper.slideTo(0, 0); - // setTimeout(() => controlledSwiper.slideTo(0, 0), 100); - // setTimeout(() => controlledSwiper.slideTo(0, 0), 300); - // }, [controlledSwiper]); - - // useEffect(() => { - // updateSwiper(); - // resetSwiper(); - // - // return () => setControlledSwiper(undefined); - // }, [images, updateSwiper, resetSwiper, setControlledSwiper]); - - const onOpenPhotoSwipe = useCallback(() => { - dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0)); - }, [dispatch, images, controlledSwiper]); + const onOpenPhotoSwipe = useCallback( + (index: number) => { + dispatch(modalShowPhotoswipe(images, index)); + }, + [dispatch, images, controlledSwiper] + ); if (!images?.length) { return null; @@ -76,12 +65,11 @@ const NodeImageSwiperBlock: FC = ({ node }) => { breakpoints={breakpoints} pagination={{ type: 'fraction' }} centeredSlides - // observeSlideChildren - // observeParents - // resizeObserver - // watchOverflow - // updateOnImagesReady - // onInit={resetSwiper} + observeSlideChildren + observeParents + resizeObserver + watchOverflow + updateOnImagesReady keyboard={{ enabled: true, onlyInViewport: false, @@ -91,23 +79,14 @@ const NodeImageSwiperBlock: FC = ({ node }) => { zoom navigation > - {images.map(file => ( + {images.map((file, i) => ( onOpenPhotoSwipe(i)} className={styles.image} /> - {/* - {node.title} - */} ))}