Karussell-Schieberegler

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.

Vorschau öffnen

                <div class="relative w-full max-w-3xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden">
  <!-- Carousel wrapper -->
  <div class="relative h-64 md:h-80 lg:h-96 overflow-hidden rounded-lg">
    <!-- Item 1 -->
    <div id="carousel-item-1" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0">
      <img src="https://picsum.photos/seed/1/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Simple Dark Mode Carousel</h3>
        <p class="text-sm md:text-base">A clean and vibrant carousel for your blog.</p>
      </div>
    </div>
    <!-- Item 2 -->
    <div id="carousel-item-2" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/2/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Engaging Content Display</h3>
        <p class="text-sm md:text-base">Showcase your articles with vibrant highlights.</p>
      </div>
    </div>
    <!-- Item 3 -->
    <div id="carousel-item-3" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/3/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Responsive Across Devices</h3>
        <p class="text-sm md:text-base">Looks great on desktop, tablet, and mobile.</p>
      </div>
    </div>
  </div>
  <!-- Slider indicators (Dots) -->
  <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2 rtl:space-x-reverse">
    <button type="button" class="w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-600" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 2"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 3"></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">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 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">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 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>

Karussell-Slider-Komponente

Eine reaktionsschnelle Karussell-Slider-Komponente für den E-Commerce mit Unterstützung des Dunkelmodus. Es enthält Produktbilder, Namen, Preise und Schaltflächen zum Hinzufügen in den Warenkorb. Das Design verwendet ein komplementäres Farbschema, das für den Dunkelmodus geeignet ist, um den Sehkomfort und die Produktpräsentation zu verbessern.

Vorschau öffnen

                <div class="dark:bg-gray-900 bg-white py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold dark:text-white text-gray-900 mb-6">Featured Products</h2>
    <div class="relative">
      <div class="carousel-container relative overflow-hidden">
        <div class="carousel-track flex transition-transform duration-500 ease-in-out">
          <!-- Product Card 1 -->
          <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
              <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Stylish Headphones</h3>
                <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience immersive sound with these premium headphones.</p>
                <div class="flex items-center justify-between">
                  <span class="text-xl font-bold text-gray-900 dark:text-white">$120.00</span>
                  <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Product Card 2 -->
          <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
              <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Smartwatch Pro</h3>
                <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Stay connected and track your fitness with this advanced smartwatch.</p>
                <div class="flex items-center justify-between">
                  <span class="text-xl font-bold text-gray-900 dark:text-white">$199.00</span>
                  <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Product Card 3 -->
          <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
              <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Portable Bluetooth Speaker</h3>
                <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Enjoy your music anywhere with this powerful and compact speaker.</p>
                <div class="flex items-center justify-between">
                  <span class="text-xl font-bold text-gray-900 dark:text-white">$75.00</span>
                  <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Product Card 4 -->
          <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
              <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Ergonomic Office Chair</h3>
                <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Work in comfort and style with this adjustable office chair.</p>
                <div class="flex items-center justify-between">
                  <span class="text-xl font-bold text-gray-900 dark:text-white">$250.00</span>
                  <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Navigation Buttons (Optional - can be styled with Tailwind) -->
      <button class="carousel-prev absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-2 rounded-full shadow-lg z-10">
        &#10094;
      </button>
      <button class="carousel-next absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-2 rounded-full shadow-lg z-10">
        &#10095;
      </button>
    </div>
  </div>
</div>

<style>
  .carousel-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
  }

  .carousel-item {
    scroll-snap-align: start;
  }

  .carousel-container {
    overflow-x: scroll;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
  }

  .carousel-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
  }
</style>

Karussell-Slider-Komponente

Eine einfache Karussell-Slider-Komponente, die für den E-Commerce im Dunkelmodus mit Tailwind CSS entwickelt wurde.

Vorschau öffnen

                <div class="relative w-full max-w-lg mx-auto">
    <div class="overflow-hidden rounded-lg shadow-lg">
        <div class="carousel-inner dark:bg-gray-800 bg-gray-100">
            <div class="carousel-item active">
                <img src="https://picsum.photos/800/400?1" alt="Product 1" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 1</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 1</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?2" alt="Product 2" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 2</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 2</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?3" alt="Product 3" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 3</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 3</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
        </div>

        <!-- Carousel controls (optional) -->
        <button class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10094;
        </button>
        <button class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10095;
        </button>
    </div>
</div>

<style>
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}
</style>

Karussell-Slider-Komponente

Eine minimalistische Karussell-Slider-Komponente, die für Blogs und den Konsum von Inhalten entwickelt wurde, mit triadischem Farbschema und responsivem Design mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="carousel w-full relative">
  <div class="carousel-inner relative w-full overflow-hidden">
    <!-- Slide 1 -->
    <div class="carousel-item active relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
      </div>
    </div>
    <!-- Slide 2 -->
    <div class="carousel-item relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. Praesent dapibus, neque id vestibulum.</p>
      </div>
    </div>
    <!-- Slide 3 -->
    <div class="carousel-item relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev absolute top-1/2 left-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Previous">
    <span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full"><</span>
  </a>
  <a class="carousel-control-next absolute top-1/2 right-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Next">
    <span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full">></span>
  </a>
</div>

Schieberegler für Neumorphismus-Karussell

Responsive Carousel Slider-Komponente mit Neumorphism-Stil, Pastell-Farbschema, mäßiger Komplexität, Social-Media-Zweck und Unterstützung für dunkles Theme mit Tailwind CSS.

Vorschau öffnen

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl neumorphism-light dark:neumorphism-dark">
    <div class="text-center text-gray-700 dark:text-gray-300 mb-6">
      <h2 class="text-2xl font-semibold">Social Media Carousel</h2>
    </div>
    <div class="relative">
      <div class="overflow-hidden rounded-lg">
        <div class="flex transition-transform duration-500 ease-in-out">
          <!-- Carousel Item 1 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=1" alt="Carousel Image 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-300 dark:border-pink-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">This is a great social media post! #tailwind #neumorphism</p>
            </div>
          </div>
          <!-- Carousel Item 2 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=2" alt="Carousel Image 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-300 dark:border-purple-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">Enjoying the pastel vibes! ✨ #pastelaesthetic</p>
            </div>
          </div>
           <!-- Carousel Item 3 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=3" alt="Carousel Image 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-green-300 dark:border-green-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">Learning about Neumorphism. So cool! #uidesign</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Navigation Dots (optional, requires JS for full functionality) -->
      <div class="flex justify-center mt-4 space-x-2">
        <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>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
      </div>
    </div>
  </div>
</div>

<style>
.neumorphism-light {
  box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}

.dark .neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>

Glasmorphismus-Karussell-Schieberegler

Eine reaktionsschnelle Karussell-Slider-Komponente im Glassmorphism-Stil, die für den Konsum von Blogs und Inhalten geeignet ist. Es verfügt über mehrere Inhaltsfolien, mattglasähnliche Elemente und ist sowohl für helle als auch für dunkle Themen konzipiert.

Vorschau öffnen

                <div class="relative w-full max-w-4xl mx-auto mt-10">
  <div class="flex overflow-hidden rounded-lg shadow-lg">
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Slide 1">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 1</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Slide 2">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 2</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Slide 3">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 3</div>
    </div>
  </div>
  <div class="flex justify-center mt-4">
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Previous</button>
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Next</button>
  </div>
  <div class="mt-4 flex justify-around">
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
      <p class="text-center text-white mt-2">Author 1</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2">
      <p class="text-center text-white mt-2">Author 2</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 3">
      <p class="text-center text-white mt-2">Author 3</p>
    </div>
  </div>
</div>

3D-Karussell-Schieberegler

Ein einfacher und reaktionsschneller Karussell-Schieberegler mit einem 3D-Designstil und einem pastellfarbenen Farbschema für Social-Media-Schnittstellen, der den Dunkelmodus unterstützt.

Vorschau öffnen

                <div class="relative w-full max-w-2xl mx-auto mt-10">
    <!-- Carousel container -->
    <div class="overflow-hidden rounded-lg shadow-2xl">
        <div class="flex transition-transform duration-300 ease-in-out transform perspective-1000">
            <!-- Carousel item 1 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-blue rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=1" alt="Carousel Image 1">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 1</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 1.</p>
                </div>
            </div>
            <!-- Carousel item 2 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-green rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=2" alt="Carousel Image 2">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 2</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 2.</p>
                </div>
            </div>
            <!-- Carousel item 3 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-yellow rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=3" alt="Carousel Image 3">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 3</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 3.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Navigation buttons -->
    <button class="absolute top-1/2 left-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
        &#10094;
    </button>
    <button class="absolute top-1/2 right-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
        &#10095;
    </button>
    <!-- Avatar section -->
    <div class="flex justify-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <span class="text-lg font-medium text-gray-800 dark:text-gray-200 ml-2">User Name</span>
    </div>
</div>

Karussell-Slider-Komponente

Implementieren Sie eine Webkomponente Carousel Slider-Komponente mit dem Designstil "Neumorphism - Ein Soft-UI-Stil, der Elemente erstellt, die mit subtilen Schatten aus dem Hintergrund herauszuragen scheinen", unter Verwendung des Farbschemas "Komplementär - Farben, die sich auf dem Farbkreis gegenüberliegen" und der Komplexitätsstufe "Komplex - Reichhaltige Benutzeroberfläche mit mehreren interaktiven Elementen" für den Zweck "Portfolio - Zur Präsentation von Arbeiten oder Produkten" mit Tailwind CSS. Erstellen Sie ein responsives Design mit Unterstützung für dunkle Themen. Es wird kein JavaScript-Code benötigt, nur HTML mit Tailwind-Klassen. Verwenden Sie für den Dunkelmodus das Präfix dark: von Tailwind für das Styling. Wenn Bilder benötigt werden, verwenden Sie picsum.photos für Bilder und randomuser.me für Avatare.

Vorschau öffnen

                <section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center max-w-screen-lg">
        <div class="flex items-center justify-center w-full h-auto">
            <div class="w-full h-full carousel">
                <div class="carousel-inner">
                    <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <label for="carousel-3" class="carousel-control prev control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" 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>
                    </label>
                    <label for="carousel-2" class="carousel-control next control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" 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>
                    </label>
                    <label for="carousel-1" class="carousel-control prev control-2">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" 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>
                    </label>
                    <label for="carousel-3" class="carousel-control next control-2">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" 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>
                    </label>
                    <label for="carousel-2" class="carousel-control prev control-3">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" 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>
                    </label>
                    <label for="carousel-1" class="carousel-control next control-3">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" 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>
                    </label>
                </div>
            </div>
        </div>
    </div>
  <style>
    .carousel-open:checked + .carousel-item {
      position: static;
      opacity: 100;
    }

    .carousel-item {
      -webkit-transition: opacity 0.6s ease-out;
      transition: opacity 0.6s ease-out;
      visibility: hidden;
      opacity: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .carousel-open:checked ~ .carousel-item:not(.carousel-item) {
      opacity: 0;
    }


    .carousel-open:checked ~ .control-1,
    .carousel-open:checked ~ .control-2,
    .carousel-open:checked ~ .control-3 {
      display: flex;
    }

    .carousel-control {
      z-index: 1;      
      display: none;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 10%;
      cursor: pointer;
      opacity: 50%;
      transition: opacity 150ms ease-in-out;
    }


    .carousel-control:hover {
      opacity: 100%;
    }

    .control-1,
    .control-2,
    .control-3 {
      width: 5vh;
      height: 5vh;
      border-radius: 50%;
      position: absolute;
    }
  
     .control-1 {
        top: 45%;
        left: 5%;
      }

      .control-2 {
        top: 45%;
        right: 5%;
      }
  
      .control-3 {
        top: 45%;
        left: 5%;
    }
  </style>
</section>

Karussell-Slider-Komponente

Eine reaktionsschnelle Karussell-Slider-Komponente, die für Dashboards entwickelt wurde und Mikrointeraktionen und lebendige Farben mit Unterstützung für den Dunkelmodus bietet.

Vorschau öffnen

                <div class="relative w-full max-w-screen-lg mx-auto">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0);"><!-- Previous Transform: translateX(-100%) -->
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 1 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 1.</p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 2 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 2.</p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 3 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 3.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="absolute top-1/2 left-0 transform -translate-y-1/2">
        <button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
            &#10094;
        </button>
    </div>
    <div class="absolute top-1/2 right-0 transform -translate-y-1/2">
        <button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
            &#10095;
        </button>
    </div>
    <div class="flex justify-center mt-4 space-x-2">
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
    </div>
</div>

Neumorphism E-Commerce Karussell-Schieberegler

Eine reaktionsschnelle neumorphe Karussell-Slider-Komponente mit Unterstützung für dunkle Designs für E-Commerce, die Tailwind CSS verwendet. Es verfügt über ein komplementäres Farbschema. Es wird kein JavaScript verwendet.

Vorschau öffnen

                <div class="flex items-center justify-center w-full h-full py-24 sm:py-8 px-4">
    <div class="w-full relative flex items-center justify-center">
        <button aria-label="slide backward" class="absolute z-30 left-0 ml-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 cursor-pointer" id="prev">
            <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 1L1 7L7 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <div class="w-full h-full mx-auto overflow-x-hidden overflow-y-hidden">
            <div id="slider" class="h-full flex lg:gap-8 md:gap-6 gap-14 items-center justify-start transition ease-out duration-700">
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                 <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button aria-label="slide forward" class="absolute z-30 right-0 mr-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" id="next">
            <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L7 7L1 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
</div>

Kategorien