How to Build a Carousel in Next.js: 3 Methods

For a simple swipeable row of cards in Next.js, start with native horizontal scrolling and CSS scroll snap. Use a small custom React component when you need tailored controls and state. Choose a library such as Embla when drag behavior, snap navigation, or grouped slides justify a dependency.

This guide implements all three methods for the App Router, explains the tradeoffs, and covers keyboard and screen-reader considerations. Next.js pages are React components exported from files such as app/page.tsx; interactive state belongs in a Client Component. See the Next.js layouts and pages documentation.

1. Choose the carousel behavior

This is a behavior-based recommendation, not a speed or bundle-size ranking. Measure your own application if performance comparisons matter.

2. Method one: native scrolling with CSS scroll snap

This approach uses browser scrolling for touch and trackpad input. CSS aligns slides to snap points when scrolling settles. It is a good default when users should browse a horizontal row without a complex carousel engine.

Build the component

Create app/components/StoryScroller.tsx:

type Story = {
  id: string;
  title: string;
  description: string;
};

const stories: Story[] = [
  { id: "one", title: "Plan", description: "Choose the story and its key image." },
  { id: "two", title: "Build", description: "Create cards that work at every width." },
  { id: "three", title: "Review", description: "Check scrolling, focus, and announcements." },
];

export function StoryScroller() {
  return (
    <section aria-label="Project stories">
      <div className="story-scroller">
        {stories.map((story) => (
          <article className="story-slide" key={story.id}>
            <h2>{story.title}</h2>
            <p>{story.description}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

Put the styles in app/globals.css:

.story-scroller {
  display: grid;
  grid-auto-columns: minmax(min(82vw, 22rem), 1fr);
  grid-auto-flow: column;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0.5rem 0.25rem 1rem;
  scroll-padding-inline: 0.25rem;
  scroll-snap-type: x proximity;
}

.story-slide {
  min-height: 12rem;
  padding: 1.25rem;
  border: 1px solid #d7dce2;
  border-radius: 0.75rem;
  background: white;
  scroll-snap-align: start;
}

.story-scroller:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .story-scroller {
    scroll-behavior: smooth;
  }
}

Use it from a page, for example app/page.tsx:

import { StoryScroller } from "./components/StoryScroller";

export default function Page() {
  return (
    <main>
      <h1>Project stories</h1>
      <StoryScroller />
    </main>
  );
}

The component is server-renderable because it has no state or browser event handlers. The browser supplies native scrolling. The cards remain in the document rather than being conditionally replaced.

Snap choices and edge cases

• scroll-snap-type: x proximity encourages alignment without forcing every scroll to a snap point. Use x mandatory only when every stop should align and each slide’s content can still be fully scrolled into view.
• MDN warns against mandatory snapping when content inside a child can overflow its parent: users may be unable to scroll that content fully into view. Test long text, zoom, and narrow screens.
• scroll-snap-align: start aligns the leading edge; center can suit a centered-card design. Match scroll-padding to any visual inset or fixed controls.
• Keep a visible scrollbar unless the interaction is obvious through other cues. If you hide it, provide clear affordances and verify keyboard access to the scroll container.
• For RTL layouts, test direction, scroll padding, and any custom navigation in the browsers you support.

See MDN’s CSS Scroll Snap guide. MDN also documents newer CSS carousel features such as generated scroll buttons and markers; those features are separate from this established overflow-and-snap pattern. Check current support before relying on them: MDN CSS carousels.

3. Method two: a custom React carousel

Use state when you want explicit previous and next buttons, one selected slide at a time, and behavior tailored to your interface. The example disables buttons at the ends rather than silently wrapping. It also announces the selected position in a polite live region.

Implement a client component

Create app/components/StateCarousel.tsx:

"use client";

import { useState } from "react";

type Slide = { id: string; title: string; description: string };

const slides: Slide[] = [
  { id: "one", title: "Plan", description: "Choose the story and its key image." },
  { id: "two", title: "Build", description: "Create cards that work at every width." },
  { id: "three", title: "Review", description: "Check scrolling, focus, and announcements." },
];

export function StateCarousel() {
  const [index, setIndex] = useState(0);
  const slide = slides[index];

  function moveTo(nextIndex: number) {
    setIndex(Math.max(0, Math.min(nextIndex, slides.length - 1)));
  }

  return (
    <section aria-roledescription="carousel" aria-label="Project stories">
      <div aria-live="polite" aria-atomic="true">
        <article
          aria-roledescription="slide"
          aria-label={`${index + 1} of ${slides.length}`}
        >
          <h2>{slide.title}</h2>
          <p>{slide.description}</p>
        </article>
      </div>
      <div className="carousel-controls">
        <button type="button" onClick={() => moveTo(index - 1)} disabled={index === 0}>
          Previous
        </button>
        <button type="button" onClick={() => moveTo(index + 1)} disabled={index === slides.length - 1}>
          Next
        </button>
      </div>
      <p>Slide {index + 1} of {slides.length}</p>
    </section>
  );
}

Render it from a server page as before:

import { StateCarousel } from "./components/StateCarousel";

export default function Page() {
  return (
    <main>
      <h1>Featured stories</h1>
      <StateCarousel />
    </main>
  );
}

The "use client" directive marks the stateful component as a Client Component. Keep data and static page structure on the server where practical, and pass serializable props if the carousel needs page-specific content.

Behavior to decide before shipping

• Ends: disable controls, wrap to the other end, or omit a direction. Make the choice apparent and consistent.
• Keyboard: native buttons work with keyboard input. If adding arrow-key shortcuts, scope them to the carousel and do not intercept keys while users type in inputs.
• Focus: do not move focus unexpectedly when a button changes slides. If a slide is removed or replaced, ensure focus does not land in hidden or nonexistent content.
• Announcements: communicate meaningful changes to screen-reader users. A live region can help, but test its actual behavior with your supported assistive technologies and avoid duplicate announcements from multiple regions.
• Autoplay: do not add it by default. If slides move automatically, users need a way to pause or stop movement, and it must not restart unexpectedly after interaction.
• Responsive size: decide whether the carousel shows one full slide or a partial next slide. Keep controls reachable and avoid clipping focused content.

A single-slide state carousel replaces visible content, unlike the scroller where all cards remain available by scrolling. That can reduce discoverability if there are no clear controls or position cues.

4. Method three: use Embla

Embla is useful when you want drag interaction and controlled snap navigation without writing the engine yourself. The supplied React documentation is for Embla v9.0.0-rc03 and points stable users to its v8 documentation. The example below targets Embla v8; use the docs matching the version you install and check its current API before copying into a project.

Install and wire the carousel

npm install embla-carousel-react

Create app/components/EmblaCarousel.tsx:

"use client";

import useEmblaCarousel from "embla-carousel-react";
import { useCallback, useEffect, useState } from "react";

type Slide = { id: string; title: string; description: string };

const slides: Slide[] = [
  { id: "one", title: "Plan", description: "Choose the story and its key image." },
  { id: "two", title: "Build", description: "Create cards that work at every width." },
  { id: "three", title: "Review", description: "Check scrolling, focus, and announcements." },
];

export function EmblaCarousel() {
  const [viewportRef, emblaApi] = useEmblaCarousel({ align: "start" });
  const [selected, setSelected] = useState(0);
  const [snapCount, setSnapCount] = useState(0);

  const updateSelection = useCallback(() => {
    if (!emblaApi) return;
    setSelected(emblaApi.selectedScrollSnap());
  }, [emblaApi]);

  useEffect(() => {
    if (!emblaApi) return;
    setSnapCount(emblaApi.scrollSnapList().length);
    updateSelection();
    emblaApi.on("select", updateSelection);
    return () => {
      emblaApi.off("select", updateSelection);
    };
  }, [emblaApi, updateSelection]);

  return (
    <section aria-roledescription="carousel" aria-label="Project stories">
      <div className="embla">
        <div className="embla__viewport" ref={viewportRef}>
          <div className="embla__container">
            {slides.map((slide, index) => (
              <article
                className="embla__slide"
                key={slide.id}
                aria-roledescription="slide"
                aria-label={`${index + 1} of ${slides.length}`}
              >
                <h2>{slide.title}</h2>
                <p>{slide.description}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
      <div className="carousel-controls">
        
          Previous
        
        
          Next