Add slideCode

2025-12-02 12:23:02 -05:00
commit 46ebe996a8
1 changed files with 65 additions and 0 deletions
--- a/65
+++ b/65
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Red Teaming Slider</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-900 flex items-center justify-center h-screen">
+
+  <div class="relative w-[800px] h-[450px] overflow-hidden border-2 border-red-600 rounded-lg">
+    <!-- Slides container -->
+    <div id="slides" class="flex transition-transform duration-500 ease-in-out"></div>
+
+    <!-- Navigation -->
+    <div class="absolute top-1/2 w-full flex justify-between transform -translate-y-1/2 px-4">
+      <button onclick="prevSlide()" class="bg-black bg-opacity-50 text-white text-3xl px-3 py-1 rounded">❮</button>
+      <button onclick="nextSlide()" class="bg-black bg-opacity-50 text-white text-3xl px-3 py-1 rounded">❯</button>
+    </div>
+  </div>
+
+  <script>
+    // List of image names (inside /images folder)
+    const imageNames = [
+      "frame1.jpg",
+      "frame2.jpg",
+      "frame3.jpg",
+      "frame4.jpg",
+      "frame5.jpg",
+      "frame6.jpg"
+    ];
+
+    const slides = document.getElementById('slides');
+
+    // Dynamically create <img> tags
+    imageNames.forEach((name, index) => {
+      const img = document.createElement('img');
+      img.src = `images/${name}`;
+      img.alt = `Frame ${index + 1}`;
+      img.className = "w-[800px] h-[450px] object-cover";
+      slides.appendChild(img);
+    });
+
+    let currentIndex = 0;
+    const totalSlides = imageNames.length;
+
+    function updateSlide() {
+      slides.style.transform = `translateX(-${currentIndex * 800}px)`;
+    }
+
+    function nextSlide() {
+      currentIndex = (currentIndex + 1) % totalSlides;
+      updateSlide();
+    }
+
+    function prevSlide() {
+      currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
+      updateSlide();
+    }
+
+    // Auto-play every 5 seconds
+    setInterval(nextSlide, 5000);
+  </script>
+</body>
+</html>