Neumorphism E-commerce 캐러셀 슬라이더
Tailwind CSS를 사용하여 전자 상거래를 위한 어두운 테마를 지원하는 반응형 Neumorphic Carousel Slider Component입니다. 보색이 특징인 이 건물은 조화를 이룹니다. JavaScript는 사용되지 않습니다.
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>관련 구성 요소
Carousel Slider 구성 요소
스포츠/피트니스 애플리케이션용으로 설계된 간단하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 어두운 모드 UI, 흑백 색 구성표, 밝은 강조 색상을 갖추고 있습니다.
Skeuomorphic_Dating_Carousel
스큐어모픽 디자인 요소와 유사한 색 구성표가 있는 간단하고 반응이 빠른 캐러셀 슬라이더 구성 요소로 데이트 또는 소셜 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.
Neumorphism 캐러셀 슬라이더
Tailwind CSS를 사용하여 Neumorphism 스타일, 파스텔 색 구성표, 중간 정도의 복잡성, 소셜 미디어 목적 및 어두운 테마를 지원하는 반응형 캐러셀 슬라이더 구성 요소입니다.