Carousels are everywhere: the hero banner on a landing page, a row of products in an online shop, the testimonials on a pricing page, the onboarding steps in an app. Most tutorials tell you to install Swiper or Slick first. That means a library, a CSS file, configuration options to learn, and kilobytes of code for a slider that shows three slides.

The free Carousel Builder on webdevpuneet.com takes a different route. You design the carousel visually, watch it work in a live preview, and copy plain HTML, CSS and JavaScript (or a React component) that has no dependencies at all. It handles slide, fade, zoom, flip and blur transitions, autoplay with pause on hover, several slides per view, vertical sliders, background images with an overlay, touch swipe, and three styles each for arrows and dots.

This guide walks through everything it can make with 15 live demos. Every demo is the exact code the builder exports, so what you see is what you get. Use the HTML, CSS and JS tabs in a demo’s top bar to read the code, and click Fork & Edit to open a copy in My Code, where you can change anything you like.

How to make a carousel in 60 seconds

  1. Open the Carousel Builder. It starts with a three-slide carousel that already works.
  2. Pick a template (Hero, Testimonials, Products or Steps) or edit the slides yourself: emoji, title, description, background color or gradient, an optional button and an optional image.
  3. Choose a transition, turn arrows, dots and autoplay on or off, and set the height, corner radius and accent color.
  4. Check it at phone, tablet and full width with the three size buttons above the preview.
  5. Pick HTML, CSS, JS, React or All-in-one under the preview and click Copy or Download. Or click Fork to My Code to keep editing it in the browser.

This is what you get before you change anything. The arrows and dots work, you can swipe it on a phone, and it loops back to the first slide after the last one:

A quick tour of the Carousel Builder

  • Templates: four starting points (Hero, Testimonials, Products, Steps) that set up the slides and the layout in one click.
  • Slides: add, duplicate, reorder and delete slides. Each slide has its own emoji, title and description, text alignment (left, center or right), title and description font sizes, a solid or gradient background with an angle, an optional button with its own label, link and color, and an optional image URL shown as cover or contain.
  • Navigation: arrows on or off in Circle, Square or Ghost style; dots on or off in Circle, Dash or Square style.
  • Behavior: autoplay with a speed from 1 to 8 seconds, loop on or off, and pause on hover.
  • Transition: Slide, Fade, Zoom, Flip or Blur, a duration from 100 to 800 ms, and for the Slide transition a direction (horizontal or vertical), the number of slides per view and the gap between them.
  • Appearance: accent color (used for the active dot), border radius, height (180 to 500 px) and a dark overlay from 0 to 80% for image slides.
  • Preview: phone (375 px), tablet (768 px) and full-width sizes, plus Undo, Redo and Clear. Your work is saved in the browser automatically, so a refresh does not lose it, and you can export or import the whole setup as a JSON file.
  • Export: HTML, CSS, JS, React or a single All-in-one HTML file, with Copy, Download and Fork to My Code.

Start from a template

The four templates cover the carousels people build most often. Each one is a normal set of slides and settings, so you can change anything after you pick it.

Hero banner slider with call-to-action buttons

A full-width banner for the top of a landing page: big headline, one line of text and a button on each slide. The button label, link and color are set per slide, so each slide can point somewhere different.

Testimonial slider with a fade transition

Quotes read better when they cross-fade in place instead of sliding sideways. This one has the arrows turned off, Dash dots and autoplay every 4 seconds, which is the usual setup for a row of reviews.

Product carousel with three slides per view

Set Per view to 3 and add a Gap, and the carousel becomes a product row. Each click moves one product along. The size of each slide is worked out in CSS from the per-view count and the gap, so it always fills the row exactly.

Vertical step-by-step slider

Switch the direction to vertical and the slides move up and down. The arrows move to the top and bottom and the dots stack on the right. It works well for onboarding steps, timelines and short how-to guides.

Five carousel transitions: slide, fade, zoom, flip and blur

Slide is the classic: the slides sit side by side on a track that moves. It is the only transition that supports several slides per view and the vertical direction. The other four stack the slides on top of each other and animate the one coming in:

  • Fade: a soft cross-fade. Best for testimonials, quotes and photos.
  • Zoom: the new slide fades in while settling from slightly zoomed in. Good for sale banners and announcements that need a bit of energy.
  • Flip: the new slide turns in like a 3D card. Fun for tips, flashcards and “did you know” facts.
  • Blur: the new slide comes into focus from a blur. A calm effect for moods, photography and quotes.

Use the Duration slider to make any of them faster or slower. 400 ms feels snappy; 600 to 800 ms feels more relaxed.

Zoom transition

3D flip transition

Blur transition

Autoplay carousel with pause on hover

Turn on Autoplay and choose how long each slide stays, from 1 to 8 seconds. With Pause on hover on, the carousel stops while the pointer is over it, so people can finish reading. This news ticker moves every 2.5 seconds; hover it to stop it:

Keep autoplay slow enough to read (3 seconds or more for a sentence) and always leave the arrows or dots on, so people can go back to a slide they missed.

Image slider with a dark overlay

Paste an image URL into any slide and choose cover (fill the slide and crop the edges) or contain (show the whole image). White text on a photo is hard to read, so the Overlay slider adds a dark layer between the image and the text. This demo uses 45%:

Use images that are about as wide as the carousel will be on a large screen (1200 to 1600 px is plenty) and compress them first. Large images are the main thing that makes a carousel slow.

Arrow and dot styles

Arrows come in Circle, Square and Ghost (transparent until you hover). Dots come in Circle, Dash (the active one grows into a bar) and Square. The active dot uses your accent color.

Square arrows and dash dots

Ghost arrows, square dots and loop turned off

With Loop off, the carousel stops at the first and last slides instead of wrapping around. Use it when the slides have a clear start and end, like a story or an onboarding flow.

Dots only, with left-aligned text

Turn the arrows off for a cleaner look and set each slide’s text to left. A bigger border radius (24 px here) makes it feel like a card. On phones people swipe anyway.

More layouts you can build

Card carousel with two slides per view

Two per view with a 20 px gap turns the slider into a row of article or course cards. Lower the title size so longer titles fit.

To show fewer cards on phones, override one CSS variable in a media query. The exported CSS sizes every slide from --c-per-view:

@media (max-width: 640px) {
  .carousel { --c-per-view: 1; }
}

Slim announcement bar

Set the height to 180 px, turn off the dots, use the Fade transition and autoplay, and you have a rotating announcement bar for the top of a site.

A few more ideas the same settings can make: a feature tour for a SaaS homepage, a portfolio or case-study slider, a strip of customer logos with 4 or 5 per view, a recipe or course step guide using the vertical direction, a row of team members, and a photo gallery slider.

Copy the code: HTML, CSS, JavaScript, React or All-in-one

  • HTML: the carousel markup. Settings like autoplay, loop and the transition are stored as data- attributes on the carousel element.
  • CSS: all the styles, with your settings as CSS variables at the top (--c-accent, --c-duration, --c-radius, --c-height, --c-per-view, --c-gap, --c-overlay). Change a variable and the whole carousel follows.
  • JS: a small Carousel class with no dependencies. It finds every element with data-carousel on the page and starts it, so you can put several carousels on one page.
  • React: a function component with hooks. Save it as Carousel.jsx and save the CSS tab as carousel.css next to it (the component imports it). No react-slick or Swiper React needed.
  • All-in-one: one complete HTML file with the CSS and JS inside. Open it in a browser or send it to someone as a prototype.

To add the carousel to an existing page, paste the HTML where it should appear, the CSS into your stylesheet and the JS just before </body>. The script starts the carousels when the page has loaded:

<link rel="stylesheet" href="carousel.css">
...
<div class="carousel" data-carousel> ... </div>
...
<script src="carousel.js"></script>
</body>

If you add the script later, after the page has already loaded (for example from another script or a tag manager), start a carousel yourself with new Carousel(document.querySelector('[data-carousel]')).

Fork to My Code: keep editing your carousel in the browser

The builder covers the settings most carousels need. When you want to go further (your own slide layout, a product image and a price on every card, a different arrow icon, keyboard support), click Fork to My Code in the export bar. My Code is the free in-browser code editor on webdevpuneet.com.

  1. Design the carousel in the builder, then click Fork to My Code next to the Copy button.
  2. My Code opens in a new tab with your carousel saved as a new snippet. The HTML, CSS and JavaScript are in three separate panels, with a live preview next to them.
  3. Edit any panel and the preview updates as you type. For JavaScript changes there is a short countdown, or press Run to run it straight away.
  4. When your code logs something or throws an error, the Console bar under the preview toolbar opens and shows it, so you can debug without opening the browser’s developer tools.
  5. Click Save to keep your changes. Snippets are stored in your own browser, so they stay private to you.
  6. Check it at phone, tablet and desktop width with the size buttons, or pop the preview out into its own window.
  7. When you are done, use Export to download it as a standalone HTML file, HTML + Tailwind, a React component, React + Tailwind, a Vue 3 single-file component or an Angular standalone component, or get an Embed code to show a live preview on WordPress and other sites.

Every demo in this article has a Fork & Edit button in its top bar that does the same thing, so you can start from any of them: the product row, the image slider, the vertical steps. Nothing is uploaded when you fork. The carousel is handed to My Code through your browser’s local storage.

Easy changes to try in My Code

  • Change the colors: edit --c-accent at the top of the CSS, or the background in each slide’s style attribute.
  • Add a slide: copy one <li class="carousel__slide"> block in the HTML. If the dots are on, copy one carousel__dot button as well.
  • Use your own content: replace the emoji, title and text inside carousel__content with anything: an <img>, a price, a star rating, a form.
  • Make it responsive: add the --c-per-view media query shown above.
  • Add keyboard support: listen for ArrowLeft and ArrowRight on the carousel and click the matching arrow button.

Tips for a carousel people actually use

  • Put the most important message on the first slide. Many visitors never see slide two.
  • Keep it to 3 to 6 slides. More than that and people stop clicking.
  • Do not autoplay faster than people can read, and keep pause on hover on.
  • Always leave a way to navigate: arrows, dots or both. Swiping alone is invisible on desktop.
  • Check the text contrast on every slide, especially on photos. Raise the overlay if the text is hard to read.
  • Compress images and keep the carousel height reasonable on phones (around 300 px works well).
  • The exported buttons have aria-labels and the dots use aria-selected, so screen readers can tell which slide is active. Keep those if you rewrite the markup.

Carousel Builder vs Swiper and Slick

Swiper and Slick are good libraries with many features: lazy loading, thumbnails, parallax, virtual slides and more. If you need those, use them. For a normal hero, product or testimonial slider they are often more than you need. The Carousel Builder gives you a few kilobytes of readable code that you own, with nothing to install, no jQuery and no version updates to track. Because the code is plain and short, it is also a good way to learn how a carousel works: how the track moves with translateX, how the dots stay in sync, and how autoplay pauses on hover.

Frequently asked questions

Is the Carousel Builder free?

Yes. It is free with no sign-up, and the code you export is yours to use in personal and commercial projects.

Does the exported carousel need jQuery, Swiper or any other library?

No. The HTML, CSS and JavaScript are plain code with no dependencies. The React export is one component plus the same CSS file, and it uses only React itself.

Is the carousel responsive and does it work on phones?

Yes. It takes the full width of its container, supports touch swipe, and you can preview it at phone and tablet sizes in the builder. Use a media query on --c-per-view to show fewer slides per view on small screens.

How do I make an autoplay carousel?

Turn on Autoplay in the Behavior section, choose a speed from 1 to 8 seconds, and leave Pause on hover on so it stops while people read.

Can I show several slides at once?

Yes. With the Slide transition, set Per view to 2, 3 or more and add a gap. The carousel then moves one slide at a time along the row.

Can I make a vertical carousel?

Yes. Choose the Slide transition and switch the direction to vertical. The arrows move to the top and bottom and the dots stack on the right.

Can I add images to the slides?

Yes. Paste an image URL into a slide and choose cover or contain. Use the Overlay slider to darken the image so the text stays readable.

Can I get a React carousel component?

Yes. Choose the React tab under the preview to get a function component with hooks. You can also fork the carousel into My Code and export it as React, React + Tailwind, Vue 3 or Angular.

Can I put more than one carousel on a page?

Yes. The script starts every element with data-carousel on the page, so paste the HTML as many times as you need.

What happens when I click Fork to My Code?

Your carousel opens in My Code as a new snippet with HTML, CSS and JavaScript panels and a live preview. It is saved in your browser, you can keep editing it, and you can export it later as HTML, Tailwind, React, Vue or Angular.

Try it yourself

Open the Carousel Builder, pick a template, choose a transition and copy the code, or click Fork to My Code and keep building. To build the rest of your page, try the Navbar Builder, the CSS Button Generator, the CSS Gradient Generator for slide backgrounds and the Image Compressor for your slide photos, or browse ready-made sliders in the UI Snippets carousel collection.

Discover more from WebDevPuneet

Subscribe to get the latest posts sent to your email.