네온 글로우 푸드 캐러셀 슬라이더
네온 글로우 효과와 사탕/달콤한 색 구성표가 있는 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 다크 모드 지원을 포함하여 음식 배달 및 레스토랑 웹사이트를 위해 설계되었습니다.
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>관련 구성 요소
Carousel Slider 구성 요소
머티리얼 디자인 미학, 세피아/브라운 톤 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 캐러셀 슬라이더 구성 요소로 포트폴리오에 적합합니다. JavaScript를 사용하지 않으므로 순전히 CSS 기반 구성 요소입니다.
Carousel Slider 구성 요소
그라데이션 색상 전환이 있는 반응형 캐러셀 슬라이더 구성 요소로, 패션 및 뷰티 브랜드를 위해 설계되었습니다. 다크 모드 지원과 세련되고 모던한 디자인이 특징입니다.