Horizontal Scroll Carousel

Component 109

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Horizontal Scroll Carousel to your project and fits it to your theme.

Code

How Horizontal Scroll Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { HorizontalScrollCarousel } from "@/components/ui/horizontal-scroll-carousel"

const images = [
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
  "https://cdn.21st.dev/assets/mirror/60/6071f6e7d7b8f04c7862d129fe4975843b68e9b69eae0763692ba587a4a4f7e1.jpg",
]

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 };