Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/Edil-ozi/horizontal-scroll-carousel"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 };