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>
|