GENERATORS

Carousel Generator

Build a carousel / slider — text or image slides with captions, one or several per view, prev / next arrows, dot pagination, autoplay with pause-on-hover, infinite loop, swipe / drag, keyboard and ARIA — with a live preview and HTML + CSS + JS output, a CSS-only scroll-snap version, or a React / Vue / Tailwind component.

What this tool does

It builds the markup, styles and JavaScript for a horizontal carousel and shows it live.

Defining slides

One per line. Plain text becomes a text slide. Start a line with img: for an image slide: img:https://… | Optional caption.

Mechanism

The JS version moves a flex track with transform: translateX and supports autoplay, infinite loop and swipe. The CSS-only version uses scroll-snap on an overflow container — no JavaScript, native momentum, but no autoplay.

Autoplay & accessibility

Autoplay pauses on hover and on keyboard focus, exposes a play/pause control, and the track is a aria-live region set to off while playing. Arrows and dots have labels; Left / Right arrow keys move slides.

Output

HTML + CSS + JS, a CSS-only scroll-snap version, or React / Vue / Tailwind.

Privacy

Everything runs in your browser. Nothing is uploaded.

FAQ

Frequently asked questions

How do I add image slides?

Start the line with "img:" then the URL, optionally followed by " | caption". Example: "img:https://picsum.photos/600/300 | Sunset over the bay".

Does autoplay respect reduced motion?

Yes. When prefers-reduced-motion is set, autoplay does not start and the transition falls back to an instant change.

What is the CSS-only version good for?

A lightweight image strip where native scroll and snap are enough — it needs zero JavaScript and gets free touch momentum. You lose autoplay, infinite loop and the transform-based transitions.

Can it show more than one slide at a time?

Yes — set slides per view to 2 or 3 (or "auto"). The arrows and dots page by one slide.

Is anything sent to a server?

No. The carousel is generated entirely in your browser; image slides load from whatever URLs you provide.