Components Carousel Slider Carousel Slider Component

Carousel Slider Component

A simple, responsive carousel slider component designed for sports/fitness applications with a dark mode UI, black and white color scheme, and a bright accent color.

Preview

HTML Code

<div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <div class="overflow-hidden rounded-lg">
    <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
      <!-- Slide 1 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports1/1200/800" alt="Fitness Training" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Intense Training Session</h3>
          <p class="text-base text-gray-200">Push your limits and achieve your fitness goals with our advanced programs.</p>
        </div>
      </div>
      <!-- Slide 2 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports2/1200/800" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Teamwork Makes the Dream Work</h3>
          <p class="text-base text-gray-200">Join a community of athletes and elevate your performance together.</p>
        </div>
      </div>
      <!-- Slide 3 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports3/1200/800" alt="Healthy Lifestyle" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Embrace a Healthier You</h3>
          <p class="text-base text-gray-200">Discover personalized routines and nutritional guidance for a better lifestyle.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Navigation Buttons (for visual representation, functionality would require JS) -->
  <button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
  </button>
  <button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </button>
  <!-- Dots/Indicators (for visual representation, functionality would require JS) -->
  <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
    <span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
  </div>
</div>

Related Components

Carousel Slider Component 28

A minimalist carousel slider component featuring responsive design and dark theme support.

Open

Glassmorphism Carousel Slider Component

Carousel Slider Component with Glassmorphism design and dark mode support.

Open

Playful Autumn Fashion Carousel

A playful and fun carousel slider component for fashion and beauty brands, featuring cheerful aesthetics, rounded elements, and an autumn color scheme. Supports responsiveness and dark mode.

Open