Added Slider Card (#915)

Rakesh9100 · Jun 11, 2024 · be0c973 · be0c973
1 parent 32e1b39
commit be0c973
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 0 deletions.
diff --git a/Components/Cards/Slider-Card/index.html b/Components/Cards/Slider-Card/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Slider Card</title>
+</head>
+
+<body>
+    <div class="slider">
+        <div class="item">
+            <h1>Slide 1</h1>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere magni magnam unde ipsam repudiandae explicabo expedita labore, sequi minus neque beatae voluptatum, quasi accusamus quia quis voluptas laborum ad! Ab totam doloribus, excepturi possimus rem vel quia fugit molestiae officiis!
+        </div>
+        <div class="item">
+            <h1>Slide 2</h1>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere magni magnam unde ipsam repudiandae explicabo expedita labore, sequi minus neque beatae voluptatum, quasi accusamus quia quis voluptas laborum ad! Ab totam doloribus, excepturi possimus rem vel quia fugit molestiae officiis!
+        </div>
+        <div class="item">
+            <h1>Slide 3</h1>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere magni magnam unde ipsam repudiandae explicabo expedita labore, sequi minus neque beatae voluptatum, quasi accusamus quia quis voluptas laborum ad! Ab totam doloribus, excepturi possimus rem vel quia fugit molestiae officiis!
+        </div>
+        <div class="item">
+            <h1>Slide 4</h1>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere magni magnam unde ipsam repudiandae explicabo expedita labore, sequi minus neque beatae voluptatum, quasi accusamus quia quis voluptas laborum ad! Ab totam doloribus, excepturi possimus rem vel quia fugit molestiae officiis!
+        </div>
+        <div class="item">
+            <h1>Slide 5</h1>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere magni magnam unde ipsam repudiandae explicabo expedita labore, sequi minus neque beatae voluptatum, quasi accusamus quia quis voluptas laborum ad! Ab totam doloribus, excepturi possimus rem vel quia fugit molestiae officiis!
+        </div>
+        <div class="item">
+            <h1>Slide 6</h1>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere magni magnam unde ipsam repudiandae explicabo expedita labore, sequi minus neque beatae voluptatum, quasi accusamus quia quis voluptas laborum ad! Ab totam doloribus, excepturi possimus rem vel quia fugit molestiae officiis!
+        </div>
+        <div class="item">
+            <h1>Slide 7</h1>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere magni magnam unde ipsam repudiandae explicabo expedita labore, sequi minus neque beatae voluptatum, quasi accusamus quia quis voluptas laborum ad! Ab totam doloribus, excepturi possimus rem vel quia fugit molestiae officiis!
+        </div>
+        <button id="next">></button>
+        <button id="prev"><</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Components/Cards/Slider-Card/script.js b/Components/Cards/Slider-Card/script.js
@@ -0,0 +1,37 @@
+let items = document.querySelectorAll('.slider .item');
+let next = document.getElementById('next');
+let prev = document.getElementById('prev');
+
+let active = 3;
+
+function loadShow() {
+    let stt = 0;
+    items[active].style.transform = `none`;
+    items[active].style.zIndex = 1;
+    items[active].style.filter = 'none';
+    items[active].style.opacity = 1;
+    for (var i = active + 1; i < items.length; i++) {
+        stt++;
+        items[i].style.transform = `translateX(${120*stt}px) scale(${1 - 0.2*stt}) perspective(16px) rotateY(-1deg)`;
+        items[i].style.zIndex = -stt;
+        items[i].style.filter = 'blur(5px)';
+        items[i].style.opacity = stt > 2 ? 0 : 0.6;
+    }
+    stt = 0;
+    for (var i = active - 1; i >= 0; i--) {
+        stt++;
+        items[i].style.transform = `translateX(${-120*stt}px) scale(${1 - 0.2*stt}) perspective(16px) rotateY(1deg)`;
+        items[i].style.zIndex = -stt;
+        items[i].style.filter = 'blur(5px)';
+        items[i].style.opacity = stt > 2 ? 0 : 0.6;
+    }
+}
+loadShow();
+next.onclick = function () {
+    active = active + 1 < items.length ? active + 1 : active;
+    loadShow();
+}
+prev.onclick = function () {
+    active = active - 1 >= 0 ? active - 1 : active;
+    loadShow();
+}
diff --git a/Components/Cards/Slider-Card/style.css b/Components/Cards/Slider-Card/style.css
@@ -0,0 +1,48 @@
+body {
+    background-image:
+        linear-gradient(to top right, #f6ee5c, #EC4899);
+    min-height: 100vh;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: monospace;
+}
+
+.slider {
+    position: relative;
+    width: 100%;
+    height: 370px;
+    overflow: hidden;
+}
+
+.item {
+    position: absolute;
+    width: 200px;
+    height: 320px;
+    text-align: justify;
+    background-color: #86d8d3;
+    border-radius: 10px;
+    padding: 20px;
+    transition: 0.5s;
+    left: calc(50% - 110px);
+    top: 0;
+}
+
+#next,
+#prev {
+    position: absolute;
+    top: 40%;
+    color: #fff;
+    background-color: transparent;
+    border: none;
+    font-size: xxx-large;
+    font-family: monospace;
+    font-weight: bold;
+    left: 400px;
+}
+
+#next {
+    left: unset;
+    right: 400px;
+}
diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html
@@ -275,6 +275,19 @@ <h1>Quotes Card</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Slider Card</h1>
+                <div class="preview">
+                    <a href="../../Components/Cards/Slider-Card/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/Cards/Slider-Card" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Timeline Card</h1>
                 <div class="preview">