diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx index e0acd2d3..cb856d6c 100644 --- a/src/components/node/NodeImageSwiperBlock/index.tsx +++ b/src/components/node/NodeImageSwiperBlock/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, useEffect, useState } from 'react'; +import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { observer } from 'mobx-react-lite'; import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper'; @@ -24,6 +24,8 @@ const breakpoints: SwiperOptions['breakpoints'] = { }, }; +const pagination = { type: 'fraction' as const }; + const NodeImageSwiperBlock: FC = observer(({ node }) => { const [controlledSwiper, setControlledSwiper] = useState(undefined); const showPhotoSwiper = useImageModal(); @@ -31,6 +33,14 @@ const NodeImageSwiperBlock: FC = observer(({ node }) => { const images = useNodeImages(node); + const keyboard = useMemo( + () => ({ + enabled: !isModalActive, + onlyInViewport: true, + }), + [isModalActive] + ); + const updateSwiper = useCallback(() => { if (!controlledSwiper) return; @@ -90,7 +100,7 @@ const NodeImageSwiperBlock: FC = observer(({ node }) => { slidesPerView="auto" onSwiper={setControlledSwiper} breakpoints={breakpoints} - pagination={{ type: 'fraction' }} + pagination={pagination} centeredSlides observeSlideChildren observeParents @@ -98,14 +108,12 @@ const NodeImageSwiperBlock: FC = observer(({ node }) => { resizeObserver watchOverflow updateOnImagesReady - keyboard={{ - enabled: !isModalActive, - onlyInViewport: true, - }} + keyboard={keyboard} grabCursor autoHeight zoom navigation + shortSwipes={false} > {images.map((file, i) => (