Added Draggable Carousel (#933)

Rakesh9100 · Jun 11, 2024 · d2db3b2 · d2db3b2
1 parent 5d914b6
commit d2db3b2
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 0 deletions.
diff --git a/Components/Carousels/Draggable-Carousel/images/1.jpg b/Components/Carousels/Draggable-Carousel/images/1.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/10.jpg b/Components/Carousels/Draggable-Carousel/images/10.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/2.jpg b/Components/Carousels/Draggable-Carousel/images/2.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/3.jpg b/Components/Carousels/Draggable-Carousel/images/3.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/4.jpg b/Components/Carousels/Draggable-Carousel/images/4.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/5.jpg b/Components/Carousels/Draggable-Carousel/images/5.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/6.jpg b/Components/Carousels/Draggable-Carousel/images/6.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/7.jpg b/Components/Carousels/Draggable-Carousel/images/7.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/8.jpg b/Components/Carousels/Draggable-Carousel/images/8.jpg
diff --git a/Components/Carousels/Draggable-Carousel/images/9.jpg b/Components/Carousels/Draggable-Carousel/images/9.jpg
diff --git a/Components/Carousels/Draggable-Carousel/index.html b/Components/Carousels/Draggable-Carousel/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Draggable Carousel</title>
+</head>
+<body>
+
+    <div id="image-track" data-mouse-down-at="0" data-prev-percentage="0">
+        <img class="image" src="images/1.jpg" draggable="false" />
+        <img class="image" src="images/2.jpg" draggable="false" />
+        <img class="image" src="images/3.jpg" draggable="false" />
+        <img class="image" src="images/4.jpg" draggable="false" />
+        <img class="image" src="images/5.jpg" draggable="false" />
+        <img class="image" src="images/6.jpg" draggable="false" />
+        <img class="image" src="images/7.jpg" draggable="false" />
+        <img class="image" src="images/8.jpg" draggable="false" />
+        <img class="image" src="images/9.jpg" draggable="false" />
+        <img class="image" src="images/10.jpg" draggable="false" />
+      </div>
+
+      <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/Components/Carousels/Draggable-Carousel/script.js b/Components/Carousels/Draggable-Carousel/script.js
@@ -0,0 +1,38 @@
+const track = document.getElementById("image-track");
+
+window.onmousedown = (e) => {
+    track.dataset.mouseDownAt = e.clientX;
+};
+window.onmouseup = () => {
+    track.dataset.mouseDownAt = "0";
+    track.dataset.prevPercentage = track.dataset.percentage;
+}
+
+window.onmousemove = e => {
+    if (track.dataset.mouseDownAt === "0") return;
+
+    const mouseDelta = parseFloat(track.dataset.mouseDownAt) - e.clientX,
+        maxDelta = window.innerWidth / 2;
+
+    const percentage = (mouseDelta / maxDelta) * -100,
+        nextPercentageUnconstrained = parseFloat(track.dataset.prevPercentage) + percentage,
+        nextPercentage = Math.max(Math.min(nextPercentageUnconstrained, 0), -100);
+
+    track.dataset.percentage = nextPercentage;
+
+    track.animate({
+        transform: `translate(${nextPercentage}%, -50%)`
+    }, {
+        duration: 1200,
+        fill: "forwards"
+    });
+
+    for (const image of track.getElementsByClassName("image")) {
+        image.animate({
+            objectPosition: `${100 + nextPercentage}% center`
+        }, {
+            duration: 1200,
+            fill: "forwards"
+        });
+    }
+}
diff --git a/Components/Carousels/Draggable-Carousel/style.css b/Components/Carousels/Draggable-Carousel/style.css
@@ -0,0 +1,25 @@
+body {
+    height: 100vh;
+    width: 100vw;
+    background-color: #10041a;
+    margin: 0rem;
+    overflow: hidden;
+}
+
+#image-track {
+    display: flex;
+    gap: 4vmin;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(0%, -50%);
+    user-select: none;
+    /* -- Prevent image highlighting -- */
+}
+
+#image-track>.image {
+    width: 40vmin;
+    height: 56vmin;
+    object-fit: cover;
+    object-position: 100% center;
+}
diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html
@@ -106,6 +106,19 @@ <h1>Card Carousel</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Draggable Carousel</h1>
+                <div class="preview">
+                    <a href="../../Components/Carousels/Draggable-Carousel/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Carousels/Draggable-Carousel" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Image Carousel</h1>
                 <div class="preview">