From 317466fd8d7ed5a6bca3497ae73038169d4ab79b Mon Sep 17 00:00:00 2001
From: SG-Noxoreos <waldemar.rutkowski+github@shopgate.com>
Date: Mon, 1 Apr 2019 17:38:51 +0200
Subject: [PATCH] PWA-1745: Fixed swiper, so that loops function properly by
 manually switching to the correct react slide, when a duplicated is about to
 be shown.

---
 libraries/common/components/Swiper/index.jsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

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]);