diff --git a/libraries/common/components/Swiper/index.jsx b/libraries/common/components/Swiper/index.jsx index cd17b3d796..41d70a5764 100644 --- a/libraries/common/components/Swiper/index.jsx +++ b/libraries/common/components/Swiper/index.jsx @@ -32,12 +32,29 @@ function Swiper(props) { disabled, } = props; + /** @type {Swiper} swiper An instance of the Swiper. */ const [swiper, setSwiper] = useState(null); useEffect(() => { if (swiper !== null) { swiper.update(); swiper.on('slideChange', () => onSlideChange(swiper.realIndex)); + swiper.on('transitionEnd', () => { + // In loop mode the Swiper duplicates elements, which are not in the virtual DOM + if (loop) { + // Skip duplicated elements + if (swiper.activeIndex < 1) { + swiper.slideToLoop(children.length - 1, 0); + } else if (swiper.activeIndex > children.length) { + swiper.slideToLoop(0, 0); + } + } + }); + swiper.on('beforeDestroy', () => { + swiper.off('slideChange'); + swiper.off('transitionEnd'); + swiper.off('beforeDestroy'); + }); } }, [swiper]);