diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 24092867..d26a4d57 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -101,8 +101,17 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => const normalizeOffset = useCallback(() => { const { width: wrap_width } = wrap.current.getBoundingClientRect(); - setOffset(Math.round(offset / wrap_width) * wrap_width); - }, [wrap, offset]); + const { width: slide_width } = slide.current.getBoundingClientRect(); + + const shift = (initial_offset - offset) / wrap_width; // percent / 100 + const diff = initial_offset - (shift > 0 ? Math.ceil(shift) : Math.floor(shift)) * wrap_width; + const new_offset = + Math.abs(shift) > 0.33 + ? Math.min(Math.max(diff, wrap_width - slide_width), 0) // next or prev slide + : Math.round(offset / wrap_width) * wrap_width; // back to this one + + setOffset(new_offset); + }, [wrap, offset, initial_offset]); const updateMaxHeight = useCallback(() => { if (!wrap.current) return;