PWA-1745: Fixed swiper, so that loops function properly by manually s…

…witching to the correct react slide, when a duplicated is about to be shown.

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