Neumorfismo E-commerce Cursore a carosello
Un componente di scorrimento del carosello neumorfico reattivo con supporto per temi scuri per l'e-commerce, utilizzando Tailwind CSS. Presenta una combinazione di colori complementari. Non viene utilizzato alcun JavaScript.
Codice HTML
<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>Componenti correlati
Playful_Forest_Agriculture_Carousel
Un componente di scorrimento a carosello giocoso e divertente progettato per l'agricoltura e i siti Web di allevamento, con una tavolozza di colori foresta/verde, elementi arrotondati e reattività completa con supporto per la modalità oscura.
Giocosa giocosa giostra di moda autunnale
Un componente di scorrimento a carosello giocoso e divertente per i marchi di moda e bellezza, caratterizzato da un'estetica allegra, elementi arrotondati e una combinazione di colori autunnali. Supporta la reattività e la modalità oscura.
Componente del dispositivo di scorrimento del carosello
Un componente di scorrimento a carosello reattivo con transizioni di colore sfumate, progettato per i marchi di moda e bellezza. Offre il supporto per la modalità oscura e un look elegante e moderno.