Deslizador de carrusel de alimentos Neon Glow
Un componente deslizante de carrusel complejo y receptivo con efectos de brillo de neón y una combinación de colores dulces/dulces, diseñado para sitios web de restaurantes y entrega de alimentos, incluida la compatibilidad con el modo oscuro.
Código 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>Componentes relacionados
Componente deslizante de carrusel 28
Un componente deslizante de carrusel minimalista con diseño responsivo y soporte para temas oscuros.
Componente Deslizador de carrusel
Un componente deslizante de carrusel receptivo diseñado para tableros, con microinteracciones y colores vibrantes con soporte para modo oscuro.
RetroCarruselControl deslizante
Un componente deslizante de carrusel simple, receptivo y de temática retro para sitios web comerciales, con soporte para modo oscuro y sin JavaScript.