How does this carousel work?

Each slide is a full-width section inside a horizontal scroller. CSS scroll-snap keeps a slide in place when scrolling stops. Arrows, dots, and autoplay call scrollTo on that track.

Does the copy include JavaScript?

The layout is CSS. Arrows, dots, and autoplay are a short script in the same snippet. Turn those off and the copy is HTML and CSS only.

Can I use my own photos?

Yes. Add an image on a slide to preview it here. The copied markup uses a file name such as slide-1.jpg. Replace that path with your image.

Does this export a Framer project?

No. The copy button exports HTML and CSS that use scroll-snap. It does not create a Framer file.

First slide

Second slide

Third slide

Slide 1 title

Background

Add image

Autoplay

Seconds

ArrowsDots

Help Us Improve

—

(—)

CSS carousel generator

Build a carousel and copy the HTML and CSS. Set slides, autoplay, arrows, and dots — free, no sign-in.

What is a CSS carousel?

A CSS carousel is a row of slides in one frame, moved by scrolling or by buttons. This page builds that row with scroll-snap, optional arrows, dots, and autoplay, then copies HTML and CSS you can paste into a page.

Carousel controls

Shape the slides, then copy one snippet.

Slides: Add up to 8 slides. Each one has a title, a background color, and an optional image.
Autoplay: Advance on a timer from 2 to 10 seconds, and loop back to the first slide.
Arrows and dots: Turn previous, next, and slide dots on or off.
Copy snippet: Copy the HTML, CSS, and the script those controls need.

How to build a CSS carousel

From slides to a snippet you can paste.

Edit the slides
Set a title and a background. Add a photo if the slide should show one.
Choose the controls
Keep arrows, dots, or autoplay. Turn off anything you do not want in the snippet.
Watch the preview
The stage uses the same scroll-snap track the CSS describes.
Copy the snippet
Paste it into a page. Replace image file names with your own paths.

Tips for carousels

Keep the row short and readable.

01
Stay under five slides
A long autoplay row hides content. Put the important slide first.
02
Give every slide a title
The heading is what remains if an image is slow or missing.
03
Pause is not in this snippet
The copied autoplay keeps running. Add a pause control if the carousel sits next to text someone needs to read.

When to use a CSS carousel

A short row of panels, not a page builder.

Hero panels
Two or three full-width messages that take turns in the same space.
Image rows
A photo sequence when you want HTML instead of a video or a GIF.
Prototypes
A working scroller you can drop into a static page before a design tool rebuilds it.

Why generate the carousel here

A preview that matches the copied CSS.

No sign-in
Edit the slides and copy the snippet. No account.
Free
The preview and the copied code have no watermark.
Uses scroll-snap
The track is CSS. The script only moves that track when you ask for controls.

Technical details

What the snippet contains.

Scroll snap: The track sets scroll-snap-type: x mandatory. Each slide sets scroll-snap-align: start and flex-basis: 100%.
Autoplay: A data-autoplay attribute stores the delay in milliseconds. The script calls scrollTo on that interval.
Images: Preview images stay in this browser session. The snippet points at slide-1.jpg and the following file names.
Limits: One to eight slides. Autoplay delay is 2 to 10 seconds.

Sources & References

The CSS that holds each slide in place.

“The scroll-snap-type CSS property is set on a scroll container, opting it into scroll snapping by setting the direction and strictness of snap point enforcement within the snap port.”
— MDN Web Docs — scroll-snap-type
scroll-snap-type: The copied track uses scroll-snap-type: x mandatory so each slide fills the frame. developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type
“The properties in the CSS scroll snap module enable you to define how scrolling snaps to specific points as a user scrolls through a document.”
— MDN Web Docs — Basic concepts of scroll snap
Scroll snap basics: Arrows and autoplay scroll the same container. Snap alignment decides where a slide stops. developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap/Basic_concepts

Frequently Asked Questions

Quick answers about this tool—open a question to read more.