Neumorphism E-commerce Carrousel Slider
Un composant de curseur de carrousel neumorphique réactif avec prise en charge du thème sombre pour le commerce électronique, à l’aide de Tailwind CSS. Il présente une palette de couleurs complémentaire. Aucun JavaScript n’est utilisé.
HTML Code
<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>Composants associés
Neon Glow Food Carrousel Slider
Un composant de curseur de carrousel complexe et réactif avec des effets de lueur néon et une palette de couleurs bonbons/sucrés, conçu pour les sites Web de livraison de nourriture et de restaurants, y compris la prise en charge du mode sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel complexe et réactif avec une palette de couleurs bonbons/doux, des micro-interactions et une prise en charge du mode sombre, adapté aux sites Web d’événements et de conférences.
Skeuomorphic_Dating_Carousel
Un composant de curseur de carrousel simple et réactif avec des éléments de conception skeuomorphes et une palette de couleurs analogue, adapté aux plateformes de rencontres ou sociales. Inclut la prise en charge du mode sombre.