Carousel Slider 구성 요소
사탕/달콤한 색 구성표, 마이크로 인터랙션 및 다크 모드 지원을 제공하는 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트에 적합합니다.
HTML 코드
<div class="relative w-full overflow-hidden bg-pink-100 dark:bg-gray-900 group">
<!-- Carousel Wrapper - This will ideally be controlled by JS for actual sliding, but for pure HTML, we show multiple states -->
<div class="flex transition-transform duration-700 ease-in-out" style="transform: translateX(0%);">
<!-- Slide 1 -->
<div class="flex-none w-full p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16">
<div class="w-full md:w-1/2 lg:w-2/5">
<img src="https://picsum.photos/600/400?random=1" alt="Event Highlight" class="rounded-2xl shadow-lg ring-4 ring-pink-300 dark:ring-pink-700 group-hover:ring-pink-400 dark:group-hover:ring-pink-600 transition-all duration-300 transform group-hover:scale-105">
</div>
<div class="w-full md:w-1/2 lg:w-3/5 text-center md:text-left">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-pink-600 dark:text-pink-400 mb-4 lg:mb-6 leading-tight group-hover:text-pink-700 dark:group-hover:text-pink-300 transition-colors duration-300">
Sweet Dreams Conference 2024
</h2>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 lg:mb-8">
Dive into the world of confectionery arts and business. Join us for inspiring talks, workshops, and networking opportunities.
</p>
<div class="flex flex-wrap gap-4 justify-center md:justify-start">
<a href="#" class="bg-pink-500 hover:bg-pink-600 active:bg-pink-700 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800">
Register Now
</a>
<a href="#" class="bg-mint-400 hover:bg-mint-500 active:bg-mint-600 dark:bg-mint-500 dark:hover:bg-mint-600 dark:active:bg-mint-700 text-gray-800 dark:text-gray-200 font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-800">
Learn More
</a>
</div>
<div class="mt-8 flex flex-wrap justify-center md:justify-start -space-x-2 overflow-hidden">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee 1">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Attendee 2">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Attendee 3">
<span class="flex h-10 w-10 rounded-full bg-pink-300 dark:bg-pink-700 items-center justify-center text-sm font-medium text-pink-700 dark:text-pink-300 ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125">+99</span>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="flex-none w-full p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16">
<div class="w-full md:w-1/2 lg:w-2/5 order-2 md:order-1">
<img src="https://picsum.photos/600/400?random=2" alt="Speaker Panel" class="rounded-2xl shadow-lg ring-4 ring-mint-300 dark:ring-mint-700 group-hover:ring-mint-400 dark:group-hover:ring-mint-600 transition-all duration-300 transform group-hover:scale-105">
</div>
<div class="w-full md:w-1/2 lg:w-3/5 text-center md:text-left order-1 md:order-2">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-mint-600 dark:text-mint-400 mb-4 lg:mb-6 leading-tight group-hover:text-mint-700 dark:group-hover:text-mint-300 transition-colors duration-300">
Meet Our Star Speakers
</h2>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 lg:mb-8">
Learn from the industry's best! Our lineup features world-renowned chocolatiers and confectionary entrepreneurs.
</p>
<ul class="list-none p-0 space-y-3 mb-6 lg:mb-8 text-gray-700 dark:text-gray-300">
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" 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="M5 13l4 4L19 7"></path></svg>
Chef Isabella "Sugar Plum" Rossi
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" 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="M5 13l4 4L19 7"></path></svg>
Dr. Alan "Cocoa" Bean
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" 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="M5 13l4 4L19 7"></path></svg>
Ms. Candice "Candy" Cane, CEO
</li>
</ul>
<a href="#" class="bg-mint-500 hover:bg-mint-600 active:bg-mint-700 dark:bg-mint-600 dark:hover:bg-mint-700 dark:active:bg-mint-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-800">
View All Speakers
</a>
</div>
</div>
</div>
<!-- Navigation Dots (Pure HTML, so they just stand for visual indication) -->
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3">
<span class="block w-3 h-3 rounded-full bg-pink-500 dark:bg-pink-400 ring-2 ring-pink-700 dark:ring-pink-200 transform transition-all duration-300 group-hover:scale-125"></span>
<span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 ring-2 ring-gray-400 dark:ring-gray-500 transform transition-all duration-300 group-hover:scale-125"></span>
<span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 ring-2 ring-gray-400 dark:ring-gray-500 transform transition-all duration-300 group-hover:scale-125 hidden sm:block"></span>
</div>
<!-- Navigation Arrows (Pure HTML, so they just stand for visual indication) -->
<button class="absolute top-1/2 left-4 md:left-8 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg ring-2 ring-pink-300 dark:ring-pink-700
text-pink-600 dark:text-pink-400 hover:bg-white dark:hover:bg-gray-700 transform transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800">
<svg class="w-6 h-6" 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>
<button class="absolute top-1/2 right-4 md:right-8 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg ring-2 ring-pink-300 dark:ring-pink-700
text-pink-600 dark:text-pink-400 hover:bg-white dark:hover:bg-gray-700 transform transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800">
<svg class="w-6 h-6" 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>
</div>
<style>
/* This is just to illustrate the effect for a single-page HTML. */
/* In a real scenario, the 'transform: translateX' on .flex would be controlled by JavaScript. */
/* If you want to show a specific slide, you'd apply a style like transform: translateX(-100%) for the second slide */
/* Or, you can just duplicate the carousel wrapper and show one slide at a time for static display */
/* For this specific requirement, I am demonstrating two possible slide contents within the single carousel wrapper div, */
/* implying that JS would handle the `translateX` for actual sliding. */
/* The 'group' utility on the parent div is used for hover effects that propagate to children. */
:root {
--color-mint-400: #99F6E4; /* Tailwind mint-400 */
--color-mint-500: #4FC0B2;
--color-mint-600: #2BB6AB;
--color-mint-700: #1B8C86; /* Tailwind mint-700 */
}
.bg-mint-400 { background-color: var(--color-mint-400); }
.hover\:bg-mint-500:hover { background-color: var(--color-mint-500); }
.active\:bg-mint-600:active { background-color: var(--color-mint-600); }
.dark\:bg-mint-500 { background-color: var(--color-mint-500); }
.dark\:hover\:bg-mint-600:hover { background-color: var(--color-mint-600); }
.dark\:active\:bg-mint-700:active { background-color: var(--color-mint-700); }
.focus\:ring-mint-300:focus { box-shadow: 0 0 0 4px var(--color-mint-400) !important; }
.dark\:focus\:ring-mint-800:focus { box-shadow: 0 0 0 4px var(--color-mint-700) !important; }
.text-mint-600 { color: var(--color-mint-600); }
.dark\:text-mint-400 { color: var(--color-mint-400); }
.group-hover\:text-mint-700:hover { color: var(--color-mint-700); }
.dark\:group-hover\:text-mint-300:hover { color: var(--color-mint-400); }
.ring-mint-300 { border-color: var(--color-mint-400); }
.dark\:ring-mint-700 { border-color: var(--color-mint-700); }
.group-hover\:ring-mint-400:hover { border-color: var(--color-mint-500); }
.dark\:group-hover\:ring-mint-600:hover { border-color: var(--color-mint-600); }
.text-mint-500 { color: var(--color-mint-500); }
.dark\:text-mint-400 { color: var(--color-mint-400); }
</style>관련 구성 요소
포트폴리오를 위한 3D 캐러셀 슬라이더 구성 요소
반응형 3D에서 영감을 받은 캐러셀 슬라이더 구성 요소로, 포트폴리오 항목을 표시하며, 보색과 다크 모드를 지원합니다. 깊이와 참여도를 염두에 두고 설계되었습니다.
Carousel Slider 구성 요소
다크 모드를 지원하는 전자 상거래를 위한 반응형 Carousel Slider 구성 요소입니다. 제품 이미지, 이름, 가격 및 장바구니에 담기 버튼이 있습니다. 이 디자인은 다크 모드에 적합한 보색 구성표를 사용하여 시각적 편안함과 제품 프레젠테이션을 향상시킵니다.
Skeuomorphic_Dating_Carousel
스큐어모픽 디자인 요소와 유사한 색 구성표가 있는 간단하고 반응이 빠른 캐러셀 슬라이더 구성 요소로 데이트 또는 소셜 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.