Kadrxy adlı üyeden alıntı: mesajı görüntüle
html ve tailwind ile bu şekilde yaptım dilersen codeopen ile canlı görünüme bakabilirsin buda iş görür.

<!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>
Hocam çok teşekkürler. Elementor ile kod yazmadan bir yol var ise o çok iyi olur. Şimdi @kozanfirmam; ile yazıştım yardımcı olacak. Size de çok teşekkür ediyorum.