Componenti Cursore carosello Componente del dispositivo di scorrimento del carosello

Componente del dispositivo di scorrimento del carosello

Un componente minimalista del cursore a carosello progettato per i blog e il consumo di contenuti, con combinazione di colori triadica e design reattivo con supporto per temi scuri.

Anteprima

Codice HTML

<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>

Componenti correlati

Cursore del carosello del neumorfismo

Componente Slider carosello reattivo con stile Neumorfismo, combinazione di colori pastello, complessità moderata, scopo per i social media e supporto per il tema scuro utilizzando Tailwind CSS.

Aperto

Componente del dispositivo di scorrimento del carosello

Un complesso componente di scorrimento a carosello in stile retrò/vintage per piattaforme educative, caratterizzato da colori tenui, design professionale e reattività completa con supporto della modalità oscura. Progettato per ambienti aziendali/professionali.

Aperto

Componente del dispositivo di scorrimento del carosello 3D per il portfolio

Un componente di scorrimento a carosello reattivo ispirato al 3D per mostrare gli elementi del portfolio, con colori complementari e supporto per la modalità scura. Progettato pensando alla profondità e al coinvolgimento.

Aperto