CCHub Logo CCHub Tailwind Collection
Komponenten Karussell-Schieberegler Brutalismus Karussell Schieberegler Komponente

Brutalismus Karussell Schieberegler Komponente

Brutalism Carousel Slider mit Tailwind CSS, Reaktionsfähigkeit und Dunkelmodus. Enthält Navigationsschaltflächen und verwendet Platzhalterbilder.

Vorschau

HTML-Code 

<section class="bg-white dark:bg-black text-black dark:text-white p-8">
  <div class="container mx-auto">
    <div class="relative" data-carousel="static">
      <!-- Carousel wrapper -->
      <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
        <!-- Item 1 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
          <img src="https://picsum.photos/id/237/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 1">
        </div>
        <!-- Item 2 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
          <img src="https://picsum.photos/id/238/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 2">
        </div>
        <!-- Item 3 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
          <img src="https://picsum.photos/id/239/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 3">
        </div>
      </div>
      <!-- Slider indicators -->
      <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
        <button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
        <button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
        <button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
      </div>
      <!-- Slider controls -->
      <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 dark:bg-white/30 group-hover:bg-black/50 dark:group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-black/40 dark:group-focus:ring-white/40">
          <svg class="w-4 h-4 text-white dark:text-black rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
          </svg>
          <span class="sr-only">Previous</span>
        </span>
      </button>
      <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 dark:bg-white/30 group-hover:bg-black/50 dark:group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-black/40 dark:group-focus:ring-white/40">
            <svg class="w-4 h-4 text-white dark:text-black rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <span class="sr-only">Next</span>
        </span>
      </button>
    </div>
  </div>
</section>

Verwandte Komponenten

Monospace Carousel Slider-Komponente

Eine einfache, saubere, vom Monospace inspirierte Karussell-Slider-Komponente für die Anzeige von Blogs/Inhalten, die mit einem analogen Farbschema und voller Reaktionsfähigkeit, einschließlich Dunkelmodus, gestaltet ist.

Offen

Karussell-Slider-Komponente

Eine reaktionsschnelle Karussell-Slider-Komponente mit Unterstützung für den Dunkelmodus. Diese Komponente verwendet nur HTML und Tailwind CSS ohne JavaScript. Es verfügt über ein einfaches Layout mit lebendigen Farben für die aktive Folie, das sich für den Konsum von Blogs oder Inhalten eignet.

Offen

Neon Glow Lebensmittelkarussell-Schieberegler

Eine komplexe, reaktionsschnelle Karussell-Slider-Komponente mit Neon-Leuchteffekten und einem Bonbon-/Süßigkeits-Farbschema, das für Essenslieferungen und Restaurant-Websites entwickelt wurde, einschließlich Unterstützung des Dunkelmodus.

Offen