네온 글로우 푸드 캐러셀 슬라이더
네온 글로우 효과와 사탕/달콤한 색 구성표가 있는 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 다크 모드 지원을 포함하여 음식 배달 및 레스토랑 웹사이트를 위해 설계되었습니다.
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>관련 구성 요소
Retro_Vintage_Sunset_Carousel_Slider_Component
레트로/빈티지 미학, 따뜻한 일몰 색 구성표를 갖춘 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 대시보드 사용 사례를 위해 설계되었습니다. 탐색 화살표, 점 및 다크 모드 지원이 포함됩니다.
Glassmorphism 캐러셀 슬라이더
블로그 및 컨텐츠 소비에 적합한 glassmorphism 스타일을 가진 반응형 캐러셀 슬라이더 구성 요소입니다. 여러 콘텐츠 슬라이드, 젖빛 유리와 같은 요소를 특징으로 하며 밝은 테마와 어두운 테마 모두에 맞게 설계되었습니다.
Carousel Slider 구성 요소
스포츠/피트니스 애플리케이션용으로 설계된 간단하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 어두운 모드 UI, 흑백 색 구성표, 밝은 강조 색상을 갖추고 있습니다.