hicyilmazz adlı üyeden alıntı:
mesajı görüntüle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Carousel</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 flex items-center justify-center min-h-screen">
<div class="w-full max-w-4xl">
<!-- Carousel Container -->
<div class="relative">
<!-- Büyük Görsel -->
<img id="mainImage"
src="https://picsum.photos/id/1015/900/500"
class="w-full h-96 object-cover rounded-xl shadow-lg border-4 border-gray-700" alt="carousel">
<!-- Sol Ok -->
<button onclick="prevImage()"
class="absolute top-1/2 left-4 -translate-y-1/2 bg-black/50 p-3 rounded-full text-white hover:bg-black/70">
❮
</button>
<!-- Sağ Ok -->
<button onclick="nextImage()"
class="absolute top-1/2 right-4 -translate-y-1/2 bg-black/50 p-3 rounded-full text-white hover:bg-black/70">
❯
</button>
</div>
<!-- Thumbnail'ler -->
<div class="flex gap-3 mt-4 justify-center">
<img onclick="goToImage(0)"
src="https://picsum.photos/id/1015/300/200"
class="thumb w-24 h-16 object-cover rounded-md cursor-pointer border-2 border-white">
<img onclick="goToImage(1)"
src="https://picsum.photos/id/1016/300/200"
class="thumb w-24 h-16 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-white">
<img onclick="goToImage(2)"
src="https://picsum.photos/id/1018/300/200"
class="thumb w-24 h-16 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-white">
</div>
</div>
<script>
const images = [
"https://picsum.photos/id/1015/900/500",
"https://picsum.photos/id/1016/900/500",
"https://picsum.photos/id/1018/900/500"
];
let currentIndex = 0;
function updateImage() {
const mainImage = document.getElementById("mainImage");
mainImage.src = images[currentIndex];
// aktif thumbnail stilini ayarla
document.querySelectorAll(".thumb").forEach((thumb, index) => {
thumb.classList.remove("border-white");
thumb.classList.add("border-transparent");
if (index === currentIndex) {
thumb.classList.add("border-white");
}
});
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
updateImage();
}
function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateImage();
}
function goToImage(index) {
currentIndex = index;
updateImage();
}
</script>
</body>
</html> 
