Create a nice s... - Tailwind AI

David Oliveros
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full">
    <div class="relative">
      <div class="overflow-hidden rounded-lg shadow-lg">
        <div class="flex transition-transform duration-500 ease-in-out" id="slider">
          <div class="min-w-full">
            <img src="https://placehold.co/600x400" alt="Slide 1" class="w-full">
          </div>
          <div class="min-w-full">
            <img src="https://placehold.co/600x400/ff7f50/ffffff" alt="Slide 2" class="w-full">
          </div>
          <div class="min-w-full">
            <img src="https://placehold.co/600x400/4682b4/ffffff" alt="Slide 3" class="w-full">
          </div>
        </div>
      </div>
      <button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-lg hover:bg-gray-200" onclick="prevSlide()">
        <i class="iconoir-arrow-left"></i>
      </button>
      <button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-lg hover:bg-gray-200" onclick="nextSlide()">
        <i class="iconoir-arrow-right"></i>
      </button>
    </div>
    <div class="flex justify-center mt-4">
      <button class="w-3 h-3 bg-gray-400 rounded-full mx-1" onclick="goToSlide(0)"></button>
      <button class="w-3 h-3 bg-gray-400 rounded-full mx-1" onclick="goToSlide(1)"></button>
      <button class="w-3 h-3 bg-gray-400 rounded-full mx-1" onclick="goToSlide(2)"></button>
    </div>
  </div>

  <script>
    let currentSlide = 0;
    const totalSlides = 3;

    function showSlide(index) {
      const slider = document.getElementById('slider');
      slider.style.transform = `translateX(-${index * 100}%)`;
      currentSlide = index;
      updateIndicators();
    }

    function nextSlide() {
      currentSlide = (currentSlide + 1) % totalSlides;
      showSlide(currentSlide);
    }

    function prevSlide() {
      currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
      showSlide(currentSlide);
    }

    function goToSlide(index) {
      showSlide(index);
    }

    function updateIndicators() {
      const indicators = document.querySelectorAll('button.w-3');
      indicators.forEach((indicator, index) => {
        indicator.classList.toggle('bg-gray-600', index === currentSlide);
        indicator.classList.toggle('bg-gray-400', index !== currentSlide);
      });
    }
  </script>
</body>
Create a nice slider
