Merge pull request #10 from Nagamanikanta-manam/main

created a image slider
surajsharma14 · Oct 23, 2023 · 5102802 · 5102802
2 parents 99669bc + 74f64b7
commit 5102802
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -26,7 +26,40 @@
         <div class="hero">
             <!-- ... (existing code) ... -->
         </div>
+
     </div>
+
+    <div class="slider-container">
+        <div class="slider">
+            <div class="slide" style="background-image: url('images/grid_image1.png');"></div>
+            <div class="slide" style="background-image: url('images/grid_image2.png');"></div>
+            <div class="slide" style="background-image: url('images/grid_image3.png');"></div>
+            <div class="slide" style="background-image: url('images/grid_image4.png');"></div>
+            <div class="slide" style="background-image: url('images/grid_image5.png');"></div>
+            <div class="slide" style="background-image: url('images/grid_image6.png');"></div>
+            <div class="slide" style="background-image: url('images/grid_image7.png');"></div>
+        </div>
+    </div>
+    <script>
+        // JavaScript for sliding the images
+        const slider = document.querySelector('.slider');
+        let slideIndex = 0;
+
+        function nextSlide() {
+            slideIndex++;
+            if (slideIndex === 7) {
+                slideIndex = 0;
+            }
+            updateSlider();
+        }
+
+        function updateSlider() {
+            slider.style.transform = `translateX(-${slideIndex * 20}vw)`;
+        }
+
+        setInterval(nextSlide, 2000); // Auto-slide every 3 seconds
+    </script>
+
     <section class="features">
         <!-- ... (existing code) ... -->
     </section>

diff --git a/style.css b/style.css
@@ -317,4 +317,32 @@ footer{
     .footer-section1 img{
         margin-bottom: 10px;
     }
+}
+.slider-container {
+    display: flex;
+    overflow: hidden;
+    width: 20vw; /* Set the width of the slider container */
+    height: 20vw;
+    margin-left: 15vw;
+    margin-top: 10vh;
+
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a box shadow */
+    border-radius: 10px; /* Add rounded corners */
+}
+
+.slider {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+    flex: 0 0 20vw; /* Square images with a length of 4vw */
+    height: 20vw;
+    background-size: cover;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a box shadow to each image */
+    margin-right: 10px; /* Add spacing between slides */
+    border-radius: 10px; /* Add rounded corners to each image */
+}
+#logo{
+    margin-right: 0vw;
 }