Carousel Slider 구성 요소
뉴스/저널리즘 웹사이트를 위한 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 회색조 색 구성표의 다크 모드 UI를 특징으로 합니다. 이미지, 제목, 설명 및 범주가 포함된 뉴스 기사를 표시하며 눈의 피로를 줄이도록 설계되었습니다.
HTML 코드
<div class="relative w-full max-w-7xl mx-auto py-8 px-4 dark:bg-gray-900 bg-white sm:px-6 lg:px-8">
<!-- Carousel Header -->
<div class="flex items-center justify-between mb-8">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Latest Headlines
</h2>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
View All
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
<!-- Carousel Container (Simplified for static HTML, requires JS for actual carousel functionality) -->
<!-- In a real scenario, this would be a JS-controlled carousel. For this HTML-only component, we'll show a responsive grid layout that implies a carousel structure. -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Carousel Item 1 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=1" alt="News Article 1" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Technology
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
Breakthrough in AI Research Announced
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
Researchers at the leading global institute have unveiled a groundbreaking development in artificial intelligence, promising to revolutionize several industries.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
Jane Doe
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Editor</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=2" alt="News Article 2" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Politics
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
Global Leaders Discuss Climate Change at Summit
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
Heads of state convened today for a critical summit to address the escalating climate crisis and pledge new initiatives.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
John Smith
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Reporter</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=3" alt="News Article 3" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Health
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
New Study Reveals Benefits of Mediterranean Diet
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
A comprehensive new study has provided compelling evidence regarding the significant health benefits associated with adhering to a Mediterranean diet.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
David Lee
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Correspondent</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
</div>
<!-- Pagination/Navigation (Placeholder for a real carousel) -->
<div class="mt-12 flex justify-center space-x-2">
<button aria-label="Previous slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<span class="sr-only">Current slide: 1</span>
<button aria-label="Slide 1" class="w-3 h-3 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-transparent ring-offset-2 ring-offset-gray-900 focus:outline-none focus:ring-gray-500"></button>
<button aria-label="Slide 2" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
<button aria-label="Slide 3" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
<button aria-label="Next slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>관련 구성 요소
Playful_Forest_Agriculture_Carousel
농업 및 농업 웹사이트를 위해 설계된 재미있고 재미있는 캐러셀 슬라이더 구성 요소로, 숲/녹색 색상 팔레트, 둥근 요소, 다크 모드 지원으로 완전한 반응성을 제공합니다.
포트폴리오를 위한 3D 캐러셀 슬라이더 구성 요소
반응형 3D에서 영감을 받은 캐러셀 슬라이더 구성 요소로, 포트폴리오 항목을 표시하며, 보색과 다크 모드를 지원합니다. 깊이와 참여도를 염두에 두고 설계되었습니다.