Carousel Builder
HTML · CSS · JS · React
Slides3 slides
#1
Align
T28pxD14px
#2
Align
T28pxD14px
#3
Align
T28pxD14px
Navigation
Arrows
Style
Dots
Dot style
Behavior
Autoplay
Loop
Transition
Type
Direction
Per view
Gap
0px
Duration
400ms
Appearance
Accent
#34d399
Radius
12px
Height
320px
Overlay
0%
PreviewSlide 1 / 3 · horizontal · slide · 320px
  • 🚀
    First Slide
    Add your first slide content here.
  • ✨
    Second Slide
    Customize each slide independently.
  • 🎨
    Third Slide
    Change colors, text, and more.
  • 🚀
    First Slide
    Add your first slide content here.
  • ✨
    Second Slide
    Customize each slide independently.
  • 🎨
    Third Slide
    Change colors, text, and more.
  • 🚀
    First Slide
    Add your first slide content here.
  • ✨
    Second Slide
    Customize each slide independently.
  • 🎨
    Third Slide
    Change colors, text, and more.
  • 🚀
    First Slide
    Add your first slide content here.
  • ✨
    Second Slide
    Customize each slide independently.
  • 🎨
    Third Slide
    Change colors, text, and more.
  • 🚀
    First Slide
    Add your first slide content here.
  • ✨
    Second Slide
    Customize each slide independently.
  • 🎨
    Third Slide
    Change colors, text, and more.
  • 🚀
    First Slide
    Add your first slide content here.
  • ✨
    Second Slide
    Customize each slide independently.
  • 🎨
    Third Slide
    Change colors, text, and more.
  • 🚀
    First Slide
    Add your first slide content here.
  • ✨
    Second Slide
    Customize each slide independently.
  • 🎨
    Third Slide
    Change colors, text, and more.
Export
<div class="carousel" data-carousel>
  <div class="carousel__viewport">
    <ul class="carousel__track">
    <li class="carousel__slide is-selected" style="background: #1e3a5f;">
      <div class="carousel__overlay"></div>
      <div class="carousel__content" style="text-align:center">
        <div class="carousel__badge">🚀</div>
        <h2 class="carousel__title" style="font-size:28px">First Slide</h2>
        <p class="carousel__desc" style="font-size:14px">Add your first slide content here.</p>
      </div>
    </li>
    <li class="carousel__slide" style="background: #1a3a2a;">
      <div class="carousel__overlay"></div>
      <div class="carousel__content" style="text-align:center">
        <div class="carousel__badge">✨</div>
        <h2 class="carousel__title" style="font-size:28px">Second Slide</h2>
        <p class="carousel__desc" style="font-size:14px">Customize each slide independently.</p>
      </div>
    </li>
    <li class="carousel__slide" style="background: #3a1a2e;">
      <div class="carousel__overlay"></div>
      <div class="carousel__content" style="text-align:center">
        <div class="carousel__badge">🎨</div>
        <h2 class="carousel__title" style="font-size:28px">Third Slide</h2>
        <p class="carousel__desc" style="font-size:14px">Change colors, text, and more.</p>
      </div>
    </li>
    </ul>
  </div>
  <button class="carousel__btn carousel__btn--prev" aria-label="Previous slide">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
  </button>
  <button class="carousel__btn carousel__btn--next" aria-label="Next slide">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
  </button>
  <div class="carousel__dots" role="tablist" aria-label="Slide navigation">
    <button class="carousel__dot is-selected" role="tab" aria-label="Slide 1" aria-selected="true"></button>
    <button class="carousel__dot" role="tab" aria-label="Slide 2" aria-selected="false"></button>
    <button class="carousel__dot" role="tab" aria-label="Slide 3" aria-selected="false"></button>
  </div>
</div>
3 slides · horizontal · slide · 400ms · arrows · dots

Related Tools

See all ->
CSS Animation GeneratorKeyframe animation builderCSS Easing GeneratorCubic-bezier curve editorFlexbox BuilderVisual layout editorCSS Grid BuilderVisual grid layout editorResponsive PreviewTest any screen sizeCSS → TailwindConvert CSS to utilitiesTailwind FormatterSort & group classesCSS Button GeneratorGradient, neon, glass, 3D buttons

Carousel Builder — Free Generate HTML, CSS, JavaScript & React Slider Code

Updated May 17, 2026
Share & Support

What's included

Features

Free, fully in-browser — no sign-up, no data sent to any server
Responsive preview toggle — instantly test your carousel at 375 px (mobile), 768 px (tablet), or full width; verify in our Responsive Preview Tool as well
Horizontal and vertical scroll direction with one-click toggle
Per View 1–6: display multiple slides side by side or stacked at once
Gap control 0–32 px — set spacing between slides in the exported CSS and live preview
Image overlay/tint 0–80% — add a dark layer over background images so text stays legible
Unlimited slides — add as many as your project needs
Per-slide background image URL with Cover / Contain toggle
Free background color picker per slide — any hex, RGB, or HSL value
Slide transition (CSS transform, supports per-view + gap) and Fade transition (CSS opacity)
Configurable transition duration from 100ms to 800ms
Arrow navigation: circle, square, and ghost styles — auto-orient in vertical mode
Dot navigation: circle, dash, and square styles — stack vertically in vertical mode
Autoplay with 1s–8s speed control, loop toggle, and pause on hover
Accent color, border radius, and carousel height controls
Export as HTML, CSS, JS, React component, or All-in-one standalone HTML; format the HTML output with our HTML Formatter
Generated CSS uses custom properties (--c-gap, --c-overlay, --c-per-view, and more) for runtime theming; beautify the CSS with our CSS Minifier & Beautifier
Semantic HTML5 with ARIA labels — accessible out of the box
Zero dependencies — no jQuery, no Swiper, no external packages
Syntax-highlighted code with one-click copy and file download

About this tool

Build a Carousel Visually and Export HTML, CSS, JS, or React — No Library Required

Runs in your browser
No install or signup
Free forever

You need a product slider that shows three cards at once, a full-width hero carousel, or a vertical story-scroll — but setting up Swiper.js or writing the translateX math from scratch takes too long for a feature you need today. Configure the carousel here and copy the production-ready code in the language you need.

Horizontal or vertical scroll direction, slide or fade transitions, 1–6 slides per view for multi-item layouts, gap control (0–32px), image overlay for text legibility, autoplay with pause-on-hover, arrow and dot navigation styles. No slide limit — each slide has its own color, image URL, title, and description. A responsive preview toggle lets you check the carousel at 375px mobile, 768px tablet, or full width before exporting.

Five export formats: HTML (semantic <ul>/<li> with BEM class names and ARIA), CSS (custom properties for theming: --c-accent, --c-gap, --c-per-view, --c-overlay), JavaScript (ES6 class, zero dependencies, initializes from data attributes), React (hooks-based functional component, React 18+), and All-in-one (complete standalone HTML you can open directly in a browser). Everything runs in your browser — nothing is uploaded.

Step by step

How to Use

  1. 1
    Add and configure slidesIn the left panel, click "Add Slide" to create a new slide. Click the color swatch on any slide card to open the color picker and choose any background color. Fill in an optional emoji, a title, and a description. Reorder slides with the ↑↓ buttons or delete with ✕. There is no slide limit.
  2. 2
    Set direction and layoutOpen the Transition section. Choose Direction: Horizontal (slides left and right) or Vertical (slides up and down). Choose Type: Slide (supports multi-item layout) or Fade (cross-fade, one slide at a time). With Slide selected, drag the Per View slider to show 2, 3, or more slides simultaneously, and drag the Gap slider (0–32 px) to add spacing between slides.
  3. 3
    Configure navigation and behaviorIn the Navigation section, toggle Arrows and Dots on or off and pick their visual style (circle, square, or ghost for arrows; circle, dash, or square for dots). In the Behavior section, enable Autoplay, set the speed (1s–8s), toggle Loop, and enable Pause on Hover.
  4. 4
    Adjust appearanceIn the Appearance section, pick an Accent color (used for the active dot), set Border Radius, adjust the carousel Height, and drag the Overlay slider (0–80%) to add a dark tint over background images so text stays readable.
  5. 5
    Test responsively and exportUse the 📱 / ⊡ / ▢ buttons in the Preview header to constrain the live preview to mobile (375 px), tablet (768 px), or full width. Then choose an export format below the preview — HTML, CSS, JS, React, or All-in-one. Click Copy to copy to clipboard or Download to save the file.

Real-world uses

Common Use Cases

▦
Build a full-width hero slider for a landing page without Swiper.js
Configure slides with background images and an overlay for text legibility, then copy the HTML/CSS/JS and drop it into any project. No npm install, no Swiper setup. Design the background gradient with our Gradient Generator.
⊞
Create a product card slider that shows three or four items at once
Set Per View to 3 or 4 and add a gap between cards for an e-commerce product carousel or feature card grid. The exported CSS uses a custom property so you can change the column count at different breakpoints.
⇅
Build a vertical scroll carousel for testimonials, onboarding steps, or timelines
Switch to vertical direction — slides translate on the Y axis, arrows reposition to top and bottom, and dots stack on the right. Download the code and integrate it directly.
⇄
Generate a React carousel component without installing a library
Select the React tab to get a hooks-based functional component compatible with React 18+. Save as Carousel.jsx and import — no Swiper React, no react-slick, no external packages.
◑
Send a working carousel prototype as a single HTML file
Use the All-in-one export to get a complete standalone HTML file with embedded CSS and JS. Open it in any browser, share as an email attachment, or drop it in a CodeSandbox — no server or build step.
⚡
Learn how slide transitions, autoplay, and dot sync work from clean source code
The generated JavaScript ES6 class is clean and documented — read it to understand how translateX offset is calculated, how autoplay setInterval integrates with pause-on-hover, and how dots stay in sync with the active slide.

Got questions?

Frequently Asked Questions

Use this free Carousel Builder tool. Configure your slides, choose transition type, direction, and styles in the left panel, then select the HTML, CSS, or JS tab below the preview and click Copy or Download. The generated HTML uses semantic <ul>/<li> elements with BEM class names, the CSS uses custom properties for easy theming, and the JavaScript is a dependency-free ES6 Carousel class — no jQuery, no npm packages needed.

Yes. Select the React tab in the export bar and copy the generated code. Save it as Carousel.jsx and download the CSS export as carousel.css in the same folder — the component imports it automatically. The component is a self-contained React functional component using useState, useEffect, and useRef hooks, compatible with React 18+. No external carousel library is required.

In the Transition section, set Direction to Vertical. The carousel track switches to flex-direction: column and translates on the Y axis. Navigation arrows reposition to the top and bottom center with up/down chevron icons, and dots stack vertically on the right side. Export the CSS and JS to get a fully working vertical carousel — no additional code changes needed.

Use the Per View slider in the Transition section (available when Slide transition is selected). Set it to 2 to show two slides side by side, 3 for three, and so on up to 6. The generated CSS uses a --c-per-view custom property so you can also override it at runtime. In vertical mode, Per View stacks multiple slides within the fixed viewport height.

Yes. The HTML output uses semantic <ul>/<li> list elements, aria-label on navigation buttons, role="tab" and aria-selected on dot indicators, and aria-hidden on non-visible slides. The CSS uses custom properties (--c-accent, --c-duration, --c-radius, --c-height, --c-per-view) so the carousel is easy to theme. The JavaScript is a clean ES6 class with zero dependencies. The React component uses hooks and follows React 18+ best practices.

There is no slide limit. Add as many slides as you need. Each slide has an optional emoji icon, a title, a description, and a custom background color you can pick with the native color picker — any hex, RGB, or HSL value is supported. Slides can be reordered with the up/down arrows or deleted individually.

Five export formats are available: HTML (semantic BEM markup with ARIA), CSS (standalone stylesheet with custom properties), JavaScript (ES6 Carousel class, zero dependencies), React (hooks-based functional component), and All-in-one (a complete standalone HTML file with embedded CSS and JS you can open directly in a browser). All formats reflect your current direction, per-view, transition, and style settings.

Yes. Enable Autoplay in the Behavior section and set a speed from 1 to 8 seconds. The live preview pauses when you hover over it if Pause on hover is enabled. In the exported HTML, data-autoplay and data-speed attributes are added to the carousel element, and the JavaScript class reads them to start a setInterval timer and attach mouseover/mouseout listeners for pause-on-hover behavior.

Yes. Arrows come in three styles: Circle (round semi-transparent buttons), Square (rounded-corner buttons), and Ghost (minimal borderless buttons). Dots come in three styles: Circle (round indicators), Dash (elongated pill that widens on active), and Square. In vertical mode, arrow icons automatically switch to up/down chevrons and reposition to the top and bottom, while dots stack on the right side. All styles update in the live preview instantly.

Open the Transition section and drag the Gap slider (0–32 px) when the Slide transition is selected. The live preview updates immediately. In the exported CSS the gap is set via the --c-gap custom property and applied as gap: var(--c-gap) on the flex track. The exported JavaScript uses offsetWidth + gap (or offsetHeight + gap for vertical) so the transform step stays exact. The React export includes a ResizeObserver that recomputes the step whenever the carousel resizes.

Use the Overlay slider in the Appearance section (0–80%). This adds a semi-transparent dark layer over each slide's background image so text remains legible. In the exported code, the overlay is a <div class="carousel__overlay"> with position: absolute; inset: 0; background: rgba(0,0,0,var(--c-overlay)) placed inside each slide, and the slide content sits above it at z-index: 2. Adjust --c-overlay at runtime to change the intensity without touching the HTML.

Yes. The Preview pane header has three size buttons: 📱 (375 px mobile), ⊡ (768 px tablet), and ▢ (full width). Clicking one constrains the live preview to that max width so you can see exactly how the carousel looks on smaller screens before you copy or download the code.

No. Everything — the live preview, code generation, and file downloads — runs entirely in your browser. No data is sent to any server and no account or sign-up is required.