fix: swiper adjust offset on window resize

MovieReviewComment · May 9, 2024 · 89724a3 · 89724a3
1 parent d4b5419
commit 89724a3
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/ui/src/hooks/common/use-swiper.ts b/ui/src/hooks/common/use-swiper.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useStateRef } from '@/hooks/common/use-state-ref';
 
@@ -144,6 +144,20 @@ export function useSwiper() {
     setOffsetX(-(containerWidthRef.current * idx));
   };
 
+  useEffect(() => {
+    const resizeHandler = () => {
+      const containerEl = containerRef.current!;
+      const containerWidth = containerEl.offsetWidth;
+
+      containerEl.classList.add('transition-none');
+      setOffsetX(-(containerWidth * currentIdx));
+      containerEl.classList.remove('transition-none');
+    };
+
+    window.addEventListener('resize', resizeHandler);
+    return () => window.removeEventListener('resize', resizeHandler);
+  }, [currentIdx, setOffsetX]);
+
   return {
     offsetX,
     onTouchStart,