Merge pull request #364 from MovieReviewComment/fix/issue-363/adjust-…

…offset-on-resize
MovieReviewComment · May 10, 2024 · 901af6a · 901af6a
2 parents d4b5419 + 89724a3
commit 901af6a
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,