Neon Glow Food Carousel Slider
Un componente di scorrimento a carosello complesso e reattivo con effetti di bagliore al neon e una combinazione di colori caramelle/dolci, progettato per la consegna di cibo a domicilio e i siti Web dei ristoranti, incluso il supporto della modalità scura.
Codice HTML
<div class="relative w-full overflow-hidden bg-gradient-to-br from-purple-100 via-pink-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 py-16">
<div class="container mx-auto px-4">
<h2 class="text-center text-4xl sm:text-5xl md:text-6xl font-extrabold mb-12 text-sweet-pink-600 dark:text-sweet-pink-400 drop-shadow-lg relative">
<span class="block relative z-10">Our <span class="text-sweet-mint-600 dark:text-sweet-mint-400">Neon Bites</span></span>
<span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-sweet-pink-300 dark:bg-sweet-pink-700 opacity-20 dark:opacity-10 blur-3xl rounded-full z-0"></span>
</h2>
<div class="relative">
<div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth pb-8 hide-scrollbar" id="carousel">
<!-- Carousel Item 1 -->
<div class="flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 p-4 snap-center">
<div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group border-4 border-solid border-sweet-pink-300 dark:border-sweet-pink-700 neon-border-pink">
<div class="absolute inset-0 bg-gradient-to-br from-sweet-pink-200 to-sweet-mint-200 dark:from-purple-900/50 dark:to-teal-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
<img src="https://picsum.photos/id/1080/400/300" alt="Spicy Noodles" class="w-full h-48 object-cover rounded-t-2xl transform group-hover:scale-105 transition-transform duration-500 relative z-10">
<div class="p-6 relative z-10">
<h3 class="text-3xl font-bold mb-2 text-sweet-pink-700 dark:text-sweet-pink-300 drop-shadow-sm">Spicy Neon Noodles</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">Fiery noodles with a glow that excites your taste buds. A truly vibrant dish!</p>
<div class="flex justify-between items-center">
<span class="text-4xl font-extrabold text-sweet-mint-600 dark:text-sweet-mint-400 drop-shadow-lg">$14.99</span>
<button class="px-6 py-3 bg-sweet-mint-500 text-white font-bold rounded-full shadow-lg hover:bg-sweet-mint-600 transition-colors duration-300 transform hover:scale-105 neon-button-mint group-hover:neon-button-mint-active">
Order Now
</button>
</div>
</div>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 p-4 snap-center">
<div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group border-4 border-solid border-sweet-mint-300 dark:border-sweet-mint-700 neon-border-mint">
<div class="absolute inset-0 bg-gradient-to-br from-sweet-mint-200 to-sweet-pink-200 dark:from-teal-900/50 dark:to-purple-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
<img src="https://picsum.photos/id/1082/400/300" alt="Glow Burgers" class="w-full h-48 object-cover rounded-t-2xl transform group-hover:scale-105 transition-transform duration-500 relative z-10">
<div class="p-6 relative z-10">
<h3 class="text-3xl font-bold mb-2 text-sweet-mint-700 dark:text-sweet-mint-300 drop-shadow-sm">Electric Blue Burgers</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">Juicy burgers with a surprising blue glow. A visual and culinary delight!</p>
<div class="flex justify-between items-center">
<span class="text-4xl font-extrabold text-sweet-pink-600 dark:text-sweet-pink-400 drop-shadow-lg">$12.50</span>
<button class="px-6 py-3 bg-sweet-pink-500 text-white font-bold rounded-full shadow-lg hover:bg-sweet-pink-600 transition-colors duration-300 transform hover:scale-105 neon-button-pink group-hover:neon-button-pink-active">
Order Now
</button>
</div>
</div>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 p-4 snap-center">
<div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group border-4 border-solid border-sweet-pink-300 dark:border-sweet-pink-700 neon-border-pink">
<div class="absolute inset-0 bg-gradient-to-br from-sweet-pink-200 to-sweet-mint-200 dark:from-purple-900/50 dark:to-teal-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
<img src="https://picsum.photos/id/1084/400/300" alt="Colorful Sushi" class="w-full h-48 object-cover rounded-t-2xl transform group-hover:scale-105 transition-transform duration-500 relative z-10">
<div class="p-6 relative z-10">
<h3 class="text-3xl font-bold mb-2 text-sweet-pink-700 dark:text-sweet-pink-300 drop-shadow-sm">Rainbow Sushi Rolls</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">A magnificent array of sushi, bursting with color and flavor.</p>
<div class="flex justify-between items-center">
<span class="text-4xl font-extrabold text-sweet-mint-600 dark:text-sweet-mint-400 drop-shadow-lg">$18.00</span>
<button class="px-6 py-3 bg-sweet-mint-500 text-white font-bold rounded-full shadow-lg hover:bg-sweet-mint-600 transition-colors duration-300 transform hover:scale-105 neon-button-mint group-hover:neon-button-mint-active">
Order Now
</button>
</div>
</div>
</div>
</div>
<!-- Carousel Item 4 -->
<div class="flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 p-4 snap-center">
<div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group border-4 border-solid border-sweet-mint-300 dark:border-sweet-mint-700 neon-border-mint">
<div class="absolute inset-0 bg-gradient-to-br from-sweet-mint-200 to-sweet-pink-200 dark:from-teal-900/50 dark:to-purple-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
<img src="https://picsum.photos/id/1070/400/300" alt="Electric Pancakes" class="w-full h-48 object-cover rounded-t-2xl transform group-hover:scale-105 transition-transform duration-500 relative z-10">
<div class="p-6 relative z-10">
<h3 class="text-3xl font-bold mb-2 text-sweet-mint-700 dark:text-sweet-mint-300 drop-shadow-sm">Glow Berry Pancakes</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">Fluffy pancakes with an ethereal glow and fresh berry explosion.</p>
<div class="flex justify-between items-center">
<span class="text-4xl font-extrabold text-sweet-pink-600 dark:text-sweet-pink-400 drop-shadow-lg">$9.50</span>
<button class="px-6 py-3 bg-sweet-pink-500 text-white font-bold rounded-full shadow-lg hover:bg-sweet-pink-600 transition-colors duration-300 transform hover:scale-105 neon-button-pink group-hover:neon-button-pink-active">
Order Now
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons (hidden on small screens, click to scroll on larger screens) -->
<button onclick="prevSlide()" class="absolute top-1/2 left-4 -translate-y-1/2 bg-white dark:bg-gray-700 text-sweet-pink-600 dark:text-sweet-pink-400 p-3 rounded-full shadow-lg hover:scale-110 transition-transform duration-300 z-20 hidden sm:block neon-arrow-pink">
<svg class="w-8 h-8" 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="3" d="M15 19l-7-7 7-7"></path></svg>
</button>
<button onclick="nextSlide()" class="absolute top-1/2 right-4 -translate-y-1/2 bg-white dark:bg-gray-700 text-sweet-mint-600 dark:text-sweet-mint-400 p-3 rounded-full shadow-lg hover:scale-110 transition-transform duration-300 z-20 hidden sm:block neon-arrow-mint">
<svg class="w-8 h-8" 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="3" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<!-- Custom Scrollbar Indicator -->
<div class="relative w-full h-2 rounded-full bg-sweet-pink-200 dark:bg-gray-700 mt-8">
<div id="scroll-indicator" class="absolute h-full rounded-full bg-sweet-mint-500 shadow-custom-mint transition-all duration-150 ease-out"></div>
</div>
</div>
</div>
<style>
/* Hide scrollbar for custom indicator */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Custom properties for color scheme */
:root {
--sweet-pink-100: #FFE4E6;
--sweet-pink-200: #FFCDD2;
--sweet-pink-300: #FFB6C1;
--sweet-pink-400: #FF96AC;
--sweet-pink-500: #FF7098;
--sweet-pink-600: #FF527B;
--sweet-pink-700: #E63965;
--sweet-mint-100: #E0FFF8;
--sweet-mint-200: #C1FFF1;
--sweet-mint-300: #A2FEEA;
--sweet-mint-400: #83FDE3;
--sweet-mint-500: #64FDDD;
--sweet-mint-600: #45FCD6;
--sweet-mint-700: #26FBCE;
}
.text-sweet-pink-600 { color: var(--sweet-pink-600); }
.dark\:text-sweet-pink-400 { color: var(--sweet-pink-400); }
.text-sweet-pink-700 { color: var(--sweet-pink-700); }
.dark\:text-sweet-pink-300 { color: var(--sweet-pink-300); }
.bg-sweet-pink-500 { background-color: var(--sweet-pink-500); }
.hover\:bg-sweet-pink-600:hover { background-color: var(--sweet-pink-600); }
.border-sweet-pink-300 { border-color: var(--sweet-pink-300); }
.dark\:border-sweet-pink-700 { border-color: var(--sweet-pink-700); }
.bg-sweet-pink-200 { background-color: var(--sweet-pink-200); }
.text-sweet-mint-600 { color: var(--sweet-mint-600); }
.dark\:text-sweet-mint-400 { color: var(--sweet-mint-400); }
.text-sweet-mint-700 { color: var(--sweet-mint-700); }
.dark\:text-sweet-mint-300 { color: var(--sweet-mint-300); }
.bg-sweet-mint-500 { background-color: var(--sweet-mint-500); }
.hover\:bg-sweet-mint-600:hover { background-color: var(--sweet-mint-600); }
.border-sweet-mint-300 { border-color: var(--sweet-mint-300); }
.dark\:border-sweet-mint-700 { border-color: var(--sweet-mint-700); }
/* Neon Glow Effects */
.neon-border-pink {
box-shadow: 0 0 5px var(--sweet-pink-500), 0 0 10px var(--sweet-pink-500), 0 0 20px var(--sweet-pink-500), inset 0 0 5px var(--sweet-pink-500), inset 0 0 10px var(--sweet-pink-500);
}
.dark .neon-border-pink {
box-shadow: 0 0 5px var(--sweet-pink-700), 0 0 10px var(--sweet-pink-700), 0 0 20px var(--sweet-pink-700), inset 0 0 5px var(--sweet-pink-700), inset 0 0 10px var(--sweet-pink-700);
}
.neon-border-mint {
box-shadow: 0 0 5px var(--sweet-mint-500), 0 0 10px var(--sweet-mint-500), 0 0 20px var(--sweet-mint-500), inset 0 0 5px var(--sweet-mint-500), inset 0 0 10px var(--sweet-mint-500);
}
.dark .neon-border-mint {
box-shadow: 0 0 5px var(--sweet-mint-700), 0 0 10px var(--sweet-mint-700), 0 0 20px var(--sweet-mint-700), inset 0 0 5px var(--sweet-mint-700), inset 0 0 10px var(--sweet-mint-700);
}
.neon-button-mint {
box-shadow: 0 0 5px var(--sweet-mint-500), 0 0 10px var(--sweet-mint-500);
transition: all 0.3s ease-in-out;
}
.group-hover\:neon-button-mint-active, .neon-button-mint:hover {
box-shadow: 0 0 10px var(--sweet-mint-500), 0 0 20px var(--sweet-mint-500), 0 0 30px var(--sweet-mint-500);
}
.dark .neon-button-mint {
box-shadow: 0 0 5px var(--sweet-mint-700), 0 0 10px var(--sweet-mint-700);
}
.dark .group-hover\:neon-button-mint-active, .dark .neon-button-mint:hover {
box-shadow: 0 0 10px var(--sweet-mint-700), 0 0 20px var(--sweet-mint-700), 0 0 30px var(--sweet-mint-700);
}
.neon-button-pink {
box-shadow: 0 0 5px var(--sweet-pink-500), 0 0 10px var(--sweet-pink-500);
transition: all 0.3s ease-in-out;
}
.group-hover\:neon-button-pink-active, .neon-button-pink:hover {
box-shadow: 0 0 10px var(--sweet-pink-500), 0 0 20px var(--sweet-pink-500), 0 0 30px var(--sweet-pink-500);
}
.dark .neon-button-pink {
box-shadow: 0 0 5px var(--sweet-pink-700), 0 0 10px var(--sweet-pink-700);
}
.dark .group-hover\:neon-button-pink-active, .dark .neon-button-pink:hover {
box-shadow: 0 0 10px var(--sweet-pink-700), 0 0 20px var(--sweet-pink-700), 0 0 30px var(--sweet-pink-700);
}
.neon-arrow-pink {
box-shadow: 0 0 8px var(--sweet-pink-500);
}
.dark .neon-arrow-pink {
box-shadow: 0 0 8px var(--sweet-pink-700);
}
.neon-arrow-pink:hover {
box-shadow: 0 0 12px var(--sweet-pink-500), 0 0 20px var(--sweet-pink-500);
}
.dark .neon-arrow-pink:hover {
box-shadow: 0 0 12px var(--sweet-pink-700), 0 0 20px var(--sweet-pink-700);
}
.neon-arrow-mint {
box-shadow: 0 0 8px var(--sweet-mint-500);
}
.dark .neon-arrow-mint {
box-shadow: 0 0 8px var(--sweet-mint-700);
}
.neon-arrow-mint:hover {
box-shadow: 0 0 12px var(--sweet-mint-500), 0 0 20px var(--sweet-mint-500);
}
.dark .neon-arrow-mint:hover {
box-shadow: 0 0 12px var(--sweet-mint-700), 0 0 20px var(--sweet-mint-700);
}
.shadow-custom-mint {
box-shadow: 0 0 10px var(--sweet-mint-500);
}
.dark .shadow-custom-mint {
box-shadow: 0 0 10px var(--sweet-mint-700);
}
</style>
<script>
const carousel = document.getElementById('carousel');
const scrollIndicator = document.getElementById('scroll-indicator');
function updateScrollIndicator() {
const scrollLeft = carousel.scrollLeft;
const scrollWidth = carousel.scrollWidth;
const clientWidth = carousel.clientWidth;
if (scrollWidth === clientWidth) {
// If no scrollbar, hide indicator or set to full width
scrollIndicator.style.width = '100%';
scrollIndicator.style.left = '0%';
return;
}
const scrollPercentage = (scrollLeft / (scrollWidth - clientWidth));
const indicatorWidth = (clientWidth / scrollWidth) * 100;
const indicatorLeft = scrollPercentage * (100 - indicatorWidth);
scrollIndicator.style.width = indicatorWidth + '%';
scrollIndicator.style.left = indicatorLeft + '%';
}
function scrollToAmount(amount) {
carousel.scrollBy({ left: amount, behavior: 'smooth' });
}
function nextSlide() {
const viewWidth = carousel.clientWidth;
let scrollAmount;
if (viewWidth >= 1024) { // lg breakpoint
scrollAmount = viewWidth / 3; // Scroll by one card width
} else if (viewWidth >= 640) { // sm breakpoint
scrollAmount = viewWidth / 2; // Scroll by one card width
} else { // default to full width
scrollAmount = viewWidth;
}
scrollToAmount(scrollAmount);
}
function prevSlide() {
const viewWidth = carousel.clientWidth;
let scrollAmount;
if (viewWidth >= 1024) { // lg breakpoint
scrollAmount = -viewWidth / 3;
} else if (viewWidth >= 640) { // sm breakpoint
scrollAmount = -viewWidth / 2;
} else { // default to full width
scrollAmount = -viewWidth;
}
scrollToAmount(scrollAmount);
}
carousel.addEventListener('scroll', updateScrollIndicator);
window.addEventListener('resize', updateScrollIndicator);
// Initial update
updateScrollIndicator();
// Optional: Add swipe functionality for mobile
let startX;
let isDragging = false;
carousel.addEventListener('touchstart', (e) => {
isDragging = true;
startX = e.touches[0].pageX - carousel.offsetLeft;
scrollLeft = carousel.scrollLeft;
});
carousel.addEventListener('touchend', () => {
isDragging = false;
});
carousel.addEventListener('touchmove', (e) => {
if (!isDragging) return;
e.preventDefault(); // Prevent scrolling page up/down
const x = e.touches[0].pageX - carousel.offsetLeft;
const walk = (x - startX) * 1; // The * 1 is to control scroll speed
carousel.scrollLeft = scrollLeft - walk;
});
</script>Componenti correlati
Cursore carosello 3D
Un dispositivo di scorrimento a carosello semplice e reattivo con uno stile di design 3D e una combinazione di colori pastello per le interfacce dei social media, che supporta la modalità oscura.
Componente del dispositivo di scorrimento del carosello
Un semplice componente di scorrimento del carosello progettato per l'e-commerce in modalità oscura utilizzando Tailwind CSS.
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.