Componente del dispositivo di scorrimento del carosello
Un componente di scorrimento a carosello complesso e reattivo per siti Web di notizie/giornalismo, dotato di un'interfaccia utente in modalità scura con una combinazione di colori in scala di grigi. Visualizza articoli di notizie con immagini, titoli, descrizioni e categorie ed è progettato per ridurre l'affaticamento degli occhi.
Codice 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>Componenti correlati
Componente del dispositivo di scorrimento del carosello in modalità oscura
Componente di scorrimento del carosello in modalità oscura con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
RetroCarouselSlider
Un componente di scorrimento a carosello semplice, reattivo e a tema retrò per siti Web aziendali, con supporto per la modalità oscura e senza JavaScript.
Componente del dispositivo di scorrimento del carosello 3D per il portfolio
Un componente di scorrimento a carosello reattivo ispirato al 3D per mostrare gli elementi del portfolio, con colori complementari e supporto per la modalità scura. Progettato pensando alla profondità e al coinvolgimento.