usb slideshow landing update

deepakpk009 · Sep 19, 2024 · 9c14c9e · 9c14c9e
1 parent e25a011
commit 9c14c9e
Showing 1 changed file with 51 additions and 11 deletions.
diff --git a/usbslideshow/index.html b/usbslideshow/index.html
@@ -57,6 +57,39 @@
         .btn-orange:hover {
             background-color: #ea580c;
         }
+        .slideshow-container {
+            position: relative;
+            max-width: 100%;
+            margin: auto;
+        }
+        .ss {
+            display: none;
+        }
+        .ss.active {
+            display: block;
+        }
+        .prev, .next {
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            width: auto;
+            padding: 16px;
+            margin-top: -22px;
+            color: white;
+            font-weight: bold;
+            font-size: 18px;
+            transition: 0.6s ease;
+            border-radius: 0 3px 3px 0;
+            user-select: none;
+            background-color: rgba(0,0,0,0.8);
+        }
+        .next {
+            right: 0;
+            border-radius: 3px 0 0 3px;
+        }
+        .prev:hover, .next:hover {
+            background-color: rgba(0,0,0,0.9);
+        }
     </style>
 </head>
 <body class="font-sans">
@@ -127,13 +160,15 @@ <h3 class="text-xl font-semibold mb-2">FTP Upload</h3>
 
         <section class="mb-12">
             <h2 class="text-2xl md:text-3xl font-semibold mb-4">See It in Action</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <img src="images/screenshots/ss1.jpg" class="ss w-full h-auto rounded-lg shadow-md">
+            <div class="slideshow-container">
+                <img src="images/screenshots/ss1.jpg" class="ss active w-full h-auto rounded-lg shadow-md">
                 <img src="images/screenshots/ss2.jpg" class="ss w-full h-auto rounded-lg shadow-md">
                 <img src="images/screenshots/ss3.jpg" class="ss w-full h-auto rounded-lg shadow-md">
                 <img src="images/screenshots/ss4.jpg" class="ss w-full h-auto rounded-lg shadow-md">
                 <img src="images/screenshots/ss5.jpg" class="ss w-full h-auto rounded-lg shadow-md">
                 <img src="images/screenshots/ss6.jpg" class="ss w-full h-auto rounded-lg shadow-md">
+                <a class="prev" onclick="changeSlide(-1)">&#10094;</a>
+                <a class="next" onclick="changeSlide(1)">&#10095;</a>
             </div>
         </section>
 
@@ -170,18 +205,23 @@ <h2 class="text-2xl md:text-3xl font-semibold mb-4">Ready to Bring Your Memories
     </footer>
 
     <script>
-        // You can add any necessary JavaScript here
-        // For example, to implement a simple image slider:
-        const images = document.querySelectorAll('ss');
-        let currentIndex = 0;
+        let slideIndex = 0;
+        showSlides();
 
-        function changeImage() {
-            images[currentIndex].style.opacity = 0;
-            currentIndex = (currentIndex + 1) % images.length;
-            images[currentIndex].style.opacity = 1;
+        function changeSlide(n) {
+            showSlides(slideIndex += n);
         }
 
-        setInterval(changeImage, 5000); // Change image every 5 seconds
+        function showSlides() {
+            let slides = document.getElementsByClassName("ss");
+            for (let i = 0; i < slides.length; i++) {
+                slides[i].classList.remove("active");
+            }
+            slideIndex++;
+            if (slideIndex > slides.length) {slideIndex = 1}
+            slides[slideIndex-1].classList.add("active");
+            setTimeout(showSlides, 5000); // Change image every 5 seconds
+        }
     </script>
 </body>
 </html>