Components
Horizontal Scroll Carousel
The HorizontalScrollCarousel component is a visually engaging carousel that leverages vertical scrolling to create a horizontal sliding effect for images. As users scroll down the page, the images move horizontally across the screen, providing a dynamic and interactive experience. This component is ideal for showcasing a series of images in a unique and captivating manner. It utilizes framer-motion for smooth animations and next/image for optimized image loading. The carousel is fully customizable, allowing you to adjust the number of images and the scrolling behavior to fit your design needs.
Loading preview...
"use client"
import { HorizontalScrollCarousel } from "@/components/ui/horizontal-scroll-carousel"
const images = [
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
"https://images.unsplash.com/photo-1572099606223-6e29045d7de3?q=80&w=2070",
]
function HorizontalScrollCarouselDemo() {
return (
<div className="min-h-[500vh] mt-[200vh] bg-stone-200 dark:bg-stone-900">
<h1 className="py-20 text-center text-4xl">
Scroll Down to See the Carousel
</h1>
<HorizontalScrollCarousel images={images} />
<h2 className="py-20 text-center text-2xl text-gray-500 dark:text-gray-600">
Enjoy the Horizontal Scroll Effect
</h2>
</div>
)
}
export { HorizontalScrollCarouselDemo };