you-dont-need · aayush105 · Oct 21, 2025 · Oct 21, 2025
diff --git a/Infinite Slider of Images/assets/img1.jpg b/Infinite Slider of Images/assets/img1.jpg
diff --git a/Infinite Slider of Images/assets/img2.jpg b/Infinite Slider of Images/assets/img2.jpg
diff --git a/Infinite Slider of Images/assets/img3.jpg b/Infinite Slider of Images/assets/img3.jpg
diff --git a/Infinite Slider of Images/assets/img4.jpg b/Infinite Slider of Images/assets/img4.jpg
diff --git a/Infinite Slider of Images/assets/img5.jpg b/Infinite Slider of Images/assets/img5.jpg
diff --git a/Infinite Slider of Images/assets/img6.jpg b/Infinite Slider of Images/assets/img6.jpg
diff --git a/Infinite Slider of Images/assets/img7.jpg b/Infinite Slider of Images/assets/img7.jpg
diff --git a/Infinite Slider of Images/assets/img8.jpg b/Infinite Slider of Images/assets/img8.jpg
diff --git a/Infinite Slider of Images/assets/img9.jpg b/Infinite Slider of Images/assets/img9.jpg
diff --git a/Infinite Slider of Images/index.html b/Infinite Slider of Images/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Infinite Slider of Images</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section class="content">
+        <div class="slider" reverse="true" style="
+            --width: 200px;
+            --height: 200px;
+            --quantity: 9;
+        ">
+            <div class="list">
+                <div class="item" style="--position: 1"><img src="assets/img1.jpg" alt=""></div>
+                <div class="item" style="--position: 2"><img src="assets/img2.jpg" alt=""></div>
+                <div class="item" style="--position: 3"><img src="assets/img3.jpg" alt=""></div>
+                <div class="item" style="--position: 4"><img src="assets/img4.jpg" alt=""></div>
+                <div class="item" style="--position: 5"><img src="assets/img5.jpg" alt=""></div>
+                <div class="item" style="--position: 6"><img src="assets/img6.jpg" alt=""></div>
+                <div class="item" style="--position: 7"><img src="assets/img7.jpg" alt=""></div>
+                <div class="item" style="--position: 8"><img src="assets/img8.jpg" alt=""></div>
+                <div class="item" style="--position: 9"><img src="assets/img9.jpg" alt=""></div>
+            </div>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/Infinite Slider of Images/style.css b/Infinite Slider of Images/style.css
@@ -0,0 +1,66 @@
+
+body{
+    margin: 0;
+    background-color: #e5e5e5;
+}
+
+.content{
+    padding: 5rem;
+    margin: 0.5rem 0px;
+    text-align: center;
+    width: min(1200px, 90vw);
+}
+
+.slider{
+    width: 100%;
+    height: var(--height);
+    overflow: hidden;
+    mask-image: linear-gradient(
+        to right,
+        transparent,
+        #000 10% 90%,
+        transparent
+    );
+}
+.slider .list{
+    display: flex;
+    width: 100%;
+    min-width: calc(var(--width) * var(--quantity));
+    position: relative;
+}
+.slider .list .item{
+    width: var(--width);
+    height: var(--height);
+    position: absolute;
+    left: 100%;
+    animation: autoRun 10s linear infinite;
+    transition: filter 0.5s;
+    animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1) - 10s)!important;
+}
+.slider .list .item img{
+    width: 100%;
+}
+@keyframes autoRun{
+    from{
+        left: 100%;
+    }to{
+        left: calc(var(--width) * -1);
+    }
+}
+.slider:hover .item{
+    animation-play-state: paused!important;
+    filter: grayscale(1);
+}
+.slider .item:hover{
+    filter: grayscale(0);
+}
+.slider[reverse="true"] .item{
+    animation: reversePlay 10s linear infinite;
+}
+@keyframes reversePlay{
+    from{
+        left: calc(var(--width) * -1);
+    }to{
+        left: 100%;
+    }
+}
diff --git a/README.md b/README.md
@@ -372,6 +372,8 @@ Your browser does not support the video tag.
 [<img src="images/gallery3.png" height="230" title="Demo 2">](https://codepen.io/olgamozejko/pen/yLjwyye)
 [<img src="images/vertical-gallery.gif" height="230" title="Demo 4">]()
 [<img src="./Author/a-img2.jpg" height="230" title="Demo 5">]()
+[<img src="images/infinite-slider.png" height="230" title="Demo 6">]()
+
 
 **[⬆ back to top](#quick-links)**
 

diff --git a/images/infinite-slider.png b/images/infinite-slider.png