66 lines
1.9 KiB
Plaintext
66 lines
1.9 KiB
Plaintext
<!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>
|