Update index.html

index.html

@@ -131,20 +131,30 @@
 
         let isDragging = false;
 
-        slider.addEventListener('mousedown', () => {
-            isDragging = true;
-        });
 
-        window.addEventListener('mouseup', () => {
-            isDragging = false;
-        });
+      let isDragging = false;
+
+        // Mouse events
+        slider.addEventListener('mousedown', () => isDragging = true);
+        window.addEventListener('mouseup', () => isDragging = false);
 
         window.addEventListener('mousemove', (event) => {
             if (!isDragging) return;
+            handleSlide(event.clientX);
+        });
 
-            const rect = container.getBoundingClientRect();
-            const offsetX = event.clientX - rect.left;
+        // Touch events
+        slider.addEventListener('touchstart', () => isDragging = true);
+        window.addEventListener('touchend', () => isDragging = false);
 
+        window.addEventListener('touchmove', (event) => {
+            if (!isDragging) return;
+            handleSlide(event.touches[0].clientX); // Get the X position from the first touch point
+        });
+
+        function handleSlide(positionX) {
+            const rect = container.getBoundingClientRect();
+            const offsetX = positionX - rect.left;
             const sliderPosition = Math.max(0, Math.min(offsetX, rect.width));
 
             // Move slider position
@@ -152,7 +162,7 @@
 
             // Adjust second video visibility using clip-path
             secondVideo.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
-        });
+        }
 
         // Function to update clip-path in real-time
         function updateClipPath() {
@@ -168,35 +178,10 @@
             slider.style.animation = 'none';
             slider.style.cursor = 'ew-resize';
             slider.style.pointerEvents = 'auto';
-
-            // User interaction
-            let isDragging = false;
-
-            slider.addEventListener('mousedown', () => {
-                isDragging = true;
-            });
-
-            window.addEventListener('mouseup', () => {
-                isDragging = false;
-            });
-
-            window.addEventListener('mousemove', (event) => {
-                if (!isDragging) return;
-
-                const rect = container.getBoundingClientRect();
-                const offsetX = event.clientX - rect.left;
-                const sliderPosition = Math.max(0, Math.min(offsetX, rect.width));
-
-                // Move slider position and update video visibility
-                slider.style.left = `${sliderPosition}px`;
-                secondVideo.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
-            });
         });
 
         // Start updating clip-path once the page loads
-        window.onload = () => {
-            updateClipPath();
-        };
+        window.onload = () => updateClipPath();
     </script>
 </body>