{"id":132,"date":"2026-10-10T05:12:41","date_gmt":"2026-10-10T05:12:41","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=132"},"modified":"2026-10-10T05:12:44","modified_gmt":"2026-10-10T05:12:44","slug":"carousel-builder-make-an-html-css-javascript-slider-without-a-library-15-live-demos","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/carousel-builder-make-an-html-css-javascript-slider-without-a-library-15-live-demos\/","title":{"rendered":"Carousel Builder: Make an HTML, CSS &amp; JavaScript Slider Without a Library (15 Live Demos)"},"content":{"rendered":"<p><!--\n================================================================\n  POST TITLE (paste into the WordPress title field \u2014 it becomes the page H1)\n  Carousel Builder: Make an HTML, CSS & JavaScript Slider Without a Library (15 Live Demos)\n\n  SEO TITLE (57 chars, target 50\u201360, max 60 \u2014 \"Optimize SEO\" panel \u2192 SEO TITLE)\n  Carousel Builder: Free HTML, CSS, JS & React Slider Maker\n\n  SEO DESCRIPTION (158 chars, target 150\u2013160, max 160 \u2014 \"Optimize SEO\" panel \u2192 SEO DESCRIPTION)\n  Build a responsive carousel visually: slide, fade, zoom, flip and blur, autoplay, multi-item and vertical sliders. Copy HTML, CSS, JS or React. 15 live demos.\n\n  HOW TO PASTE: click the first line after this comment, press Ctrl+Shift+End, Ctrl+C.\n  In WordPress click \"Type \/ to choose a block\", then Ctrl+V.\n  Fallback: \u22ee menu \u2192 Code editor \u2192 paste.\n================================================================\n--><\/p>\n\n\n<p class=\"wp-block-paragraph\">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 <strong>Swiper<\/strong> or <strong>Slick<\/strong> first. That means a library, a CSS file, configuration options to learn, and kilobytes of code for a slider that shows three slides.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The free <a href=\"https:\/\/webdevpuneet.com\/carousel-builder\/\">Carousel Builder<\/a> on webdevpuneet.com takes a different route. You design the carousel visually, watch it work in a live preview, and copy <strong>plain HTML, CSS and JavaScript<\/strong> (or a <strong>React component<\/strong>) that has no dependencies at all. It handles <strong>slide, fade, zoom, flip and blur transitions<\/strong>, <strong>autoplay with pause on hover<\/strong>, <strong>several slides per view<\/strong>, <strong>vertical sliders<\/strong>, <strong>background images with an overlay<\/strong>, touch swipe, and three styles each for arrows and dots.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide walks through everything it can make with <strong>15 live demos<\/strong>. Every demo is the exact code the builder exports, so what you see is what you get. Use the <strong>HTML<\/strong>, <strong>CSS<\/strong> and <strong>JS<\/strong> tabs in a demo&#8217;s top bar to read the code, and click <strong>Fork &amp; Edit<\/strong> to open a copy in <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/mycode\/\">My Code<\/a>, where you can change anything you like.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to make a carousel in 60 seconds<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <a href=\"https:\/\/webdevpuneet.com\/carousel-builder\/\">Carousel Builder<\/a>. It starts with a three-slide carousel that already works.<\/li>\n\n\n\n<li>Pick a template (<strong>Hero<\/strong>, <strong>Testimonials<\/strong>, <strong>Products<\/strong> or <strong>Steps<\/strong>) or edit the slides yourself: emoji, title, description, background color or gradient, an optional button and an optional image.<\/li>\n\n\n\n<li>Choose a transition, turn arrows, dots and autoplay on or off, and set the height, corner radius and accent color.<\/li>\n\n\n\n<li>Check it at phone, tablet and full width with the three size buttons above the preview.<\/li>\n\n\n\n<li>Pick <strong>HTML<\/strong>, <strong>CSS<\/strong>, <strong>JS<\/strong>, <strong>React<\/strong> or <strong>All-in-one<\/strong> under the preview and click <strong>Copy<\/strong> or <strong>Download<\/strong>. Or click <strong>Fork to My Code<\/strong> to keep editing it in the browser.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/1.html\" style=\"width:100%;height:436px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Default Carousel Builder Slider Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">A quick tour of the Carousel Builder<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Templates<\/strong>: four starting points (Hero, Testimonials, Products, Steps) that set up the slides and the layout in one click.<\/li>\n\n\n\n<li><strong>Slides<\/strong>: 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 <em>cover<\/em> or <em>contain<\/em>.<\/li>\n\n\n\n<li><strong>Navigation<\/strong>: arrows on or off in Circle, Square or Ghost style; dots on or off in Circle, Dash or Square style.<\/li>\n\n\n\n<li><strong>Behavior<\/strong>: autoplay with a speed from 1 to 8 seconds, loop on or off, and pause on hover.<\/li>\n\n\n\n<li><strong>Transition<\/strong>: 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.<\/li>\n\n\n\n<li><strong>Appearance<\/strong>: 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.<\/li>\n\n\n\n<li><strong>Preview<\/strong>: phone (375 px), tablet (768 px) and full-width sizes, plus <strong>Undo<\/strong>, <strong>Redo<\/strong> and <strong>Clear<\/strong>. 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.<\/li>\n\n\n\n<li><strong>Export<\/strong>: HTML, CSS, JS, React or a single All-in-one HTML file, with Copy, Download and Fork to My Code.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Start from a template<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hero banner slider with call-to-action buttons<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/2.html\" style=\"width:100%;height:476px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Hero Banner Slider with CTA Buttons Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Testimonial slider with a fade transition<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Quotes read better when they cross-fade in place instead of sliding sideways. This one has the arrows turned off, <strong>Dash<\/strong> dots and autoplay every 4 seconds, which is the usual setup for a row of reviews.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/3.html\" style=\"width:100%;height:396px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Testimonial Slider with Fade Transition Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Product carousel with three slides per view<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Set <strong>Per view<\/strong> to 3 and add a <strong>Gap<\/strong>, 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.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/4.html\" style=\"width:100%;height:416px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Product Carousel 3 per View Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Vertical step-by-step slider<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Switch the direction to <strong>vertical<\/strong> 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.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/5.html\" style=\"width:100%;height:416px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Vertical Step-by-Step Slider Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Five carousel transitions: slide, fade, zoom, flip and blur<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Slide<\/strong> 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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fade<\/strong>: a soft cross-fade. Best for testimonials, quotes and photos.<\/li>\n\n\n\n<li><strong>Zoom<\/strong>: the new slide fades in while settling from slightly zoomed in. Good for sale banners and announcements that need a bit of energy.<\/li>\n\n\n\n<li><strong>Flip<\/strong>: the new slide turns in like a 3D card. Fun for tips, flashcards and &#8220;did you know&#8221; facts.<\/li>\n\n\n\n<li><strong>Blur<\/strong>: the new slide comes into focus from a blur. A calm effect for moods, photography and quotes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Use the <strong>Duration<\/strong> slider to make any of them faster or slower. 400 ms feels snappy; 600 to 800 ms feels more relaxed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zoom transition<\/h3>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/6.html\" style=\"width:100%;height:436px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Zoom Transition Carousel Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">3D flip transition<\/h3>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/7.html\" style=\"width:100%;height:436px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"3D Flip Transition Carousel Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Blur transition<\/h3>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/8.html\" style=\"width:100%;height:436px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Blur Transition Carousel Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Autoplay carousel with pause on hover<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Turn on <strong>Autoplay<\/strong> and choose how long each slide stays, from 1 to 8 seconds. With <strong>Pause on hover<\/strong> 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:<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/9.html\" style=\"width:100%;height:436px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Autoplay Carousel with Pause on Hover Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Image slider with a dark overlay<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Paste an image URL into any slide and choose <strong>cover<\/strong> (fill the slide and crop the edges) or <strong>contain<\/strong> (show the whole image). White text on a photo is hard to read, so the <strong>Overlay<\/strong> slider adds a dark layer between the image and the text. This demo uses 45%:<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/10.html\" style=\"width:100%;height:496px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Image Slider with Dark Overlay Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Arrow and dot styles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Arrows come in <strong>Circle<\/strong>, <strong>Square<\/strong> and <strong>Ghost<\/strong> (transparent until you hover). Dots come in <strong>Circle<\/strong>, <strong>Dash<\/strong> (the active one grows into a bar) and <strong>Square<\/strong>. The active dot uses your accent color.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Square arrows and dash dots<\/h3>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/11.html\" style=\"width:100%;height:436px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Square Arrows and Dash Dots Carousel Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Ghost arrows, square dots and loop turned off<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With <strong>Loop<\/strong> 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.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/12.html\" style=\"width:100%;height:436px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Ghost Arrows Square Dots No Loop Carousel Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Dots only, with left-aligned text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Turn the arrows off for a cleaner look and set each slide&#8217;s text to <strong>left<\/strong>. A bigger border radius (24 px here) makes it feel like a card. On phones people swipe anyway.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/13.html\" style=\"width:100%;height:416px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Dots Only Carousel with Left-Aligned Text Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">More layouts you can build<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Card carousel with two slides per view<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/14.html\" style=\"width:100%;height:376px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Card Carousel 2 per View Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">To show fewer cards on phones, override one CSS variable in a media query. The exported CSS sizes every slide from <code>--c-per-view<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (max-width: 640px) {\n  .carousel { --c-per-view: 1; }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Slim announcement bar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Set the height to 180 px, turn off the dots, use the <strong>Fade<\/strong> transition and autoplay, and you have a rotating announcement bar for the top of a site.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/39\/15.html\" style=\"width:100%;height:296px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Slim Announcement Bar Carousel Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Copy the code: HTML, CSS, JavaScript, React or All-in-one<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML<\/strong>: the carousel markup. Settings like autoplay, loop and the transition are stored as <code>data-<\/code> attributes on the carousel element.<\/li>\n\n\n\n<li><strong>CSS<\/strong>: all the styles, with your settings as CSS variables at the top (<code>--c-accent<\/code>, <code>--c-duration<\/code>, <code>--c-radius<\/code>, <code>--c-height<\/code>, <code>--c-per-view<\/code>, <code>--c-gap<\/code>, <code>--c-overlay<\/code>). Change a variable and the whole carousel follows.<\/li>\n\n\n\n<li><strong>JS<\/strong>: a small <code>Carousel<\/code> class with no dependencies. It finds every element with <code>data-carousel<\/code> on the page and starts it, so you can put several carousels on one page.<\/li>\n\n\n\n<li><strong>React<\/strong>: a function component with hooks. Save it as <code>Carousel.jsx<\/code> and save the CSS tab as <code>carousel.css<\/code> next to it (the component imports it). No react-slick or Swiper React needed.<\/li>\n\n\n\n<li><strong>All-in-one<\/strong>: one complete HTML file with the CSS and JS inside. Open it in a browser or send it to someone as a prototype.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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 <code>&lt;\/body&gt;<\/code>. The script starts the carousels when the page has loaded:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"carousel.css\"&gt;\n...\n&lt;div class=\"carousel\" data-carousel&gt; ... &lt;\/div&gt;\n...\n&lt;script src=\"carousel.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">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 <code>new Carousel(document.querySelector('[data-carousel]'))<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fork to My Code: keep editing your carousel in the browser<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <strong>Fork to My Code<\/strong> in the export bar. <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/mycode\/\">My Code<\/a> is the free in-browser code editor on webdevpuneet.com.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Design the carousel in the builder, then click <strong>Fork to My Code<\/strong> next to the Copy button.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>Edit any panel and the preview updates as you type. For JavaScript changes there is a short countdown, or press <strong>Run<\/strong> to run it straight away.<\/li>\n\n\n\n<li>When your code logs something or throws an error, the <strong>Console<\/strong> bar under the preview toolbar opens and shows it, so you can debug without opening the browser\u2019s developer tools.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong> to keep your changes. Snippets are stored in your own browser, so they stay private to you.<\/li>\n\n\n\n<li>Check it at phone, tablet and desktop width with the size buttons, or pop the preview out into its own window.<\/li>\n\n\n\n<li>When you are done, use <strong>Export<\/strong> to download it as a standalone <strong>HTML<\/strong> file, <strong>HTML + Tailwind<\/strong>, a <strong>React<\/strong> component, <strong>React + Tailwind<\/strong>, a <strong>Vue 3<\/strong> single-file component or an <strong>Angular<\/strong> standalone component, or get an <strong>Embed<\/strong> code to show a live preview on WordPress and other sites.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Every demo in this article has a <strong>Fork &amp; Edit<\/strong> 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&#8217;s local storage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Easy changes to try in My Code<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Change the colors<\/strong>: edit <code>--c-accent<\/code> at the top of the CSS, or the <code>background<\/code> in each slide&#8217;s <code>style<\/code> attribute.<\/li>\n\n\n\n<li><strong>Add a slide<\/strong>: copy one <code>&lt;li class=\"carousel__slide\"&gt;<\/code> block in the HTML. If the dots are on, copy one <code>carousel__dot<\/code> button as well.<\/li>\n\n\n\n<li><strong>Use your own content<\/strong>: replace the emoji, title and text inside <code>carousel__content<\/code> with anything: an <code>&lt;img&gt;<\/code>, a price, a star rating, a form.<\/li>\n\n\n\n<li><strong>Make it responsive<\/strong>: add the <code>--c-per-view<\/code> media query shown above.<\/li>\n\n\n\n<li><strong>Add keyboard support<\/strong>: listen for <code>ArrowLeft<\/code> and <code>ArrowRight<\/code> on the carousel and click the matching arrow button.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for a carousel people actually use<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Put the most important message on the first slide. Many visitors never see slide two.<\/li>\n\n\n\n<li>Keep it to 3 to 6 slides. More than that and people stop clicking.<\/li>\n\n\n\n<li>Do not autoplay faster than people can read, and keep pause on hover on.<\/li>\n\n\n\n<li>Always leave a way to navigate: arrows, dots or both. Swiping alone is invisible on desktop.<\/li>\n\n\n\n<li>Check the text contrast on every slide, especially on photos. Raise the overlay if the text is hard to read.<\/li>\n\n\n\n<li>Compress images and keep the carousel height reasonable on phones (around 300 px works well).<\/li>\n\n\n\n<li>The exported buttons have <code>aria-label<\/code>s and the dots use <code>aria-selected<\/code>, so screen readers can tell which slide is active. Keep those if you rewrite the markup.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Carousel Builder vs Swiper and Slick<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <code>translateX<\/code>, how the dots stay in sync, and how autoplay pauses on hover.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Is the Carousel Builder free?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. It is free with no sign-up, and the code you export is yours to use in personal and commercial projects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Does the exported carousel need jQuery, Swiper or any other library?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Is the carousel responsive and does it work on phones?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 <code>--c-per-view<\/code> to show fewer slides per view on small screens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I make an autoplay carousel?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I show several slides at once?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I make a vertical carousel?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I add images to the slides?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I get a React carousel component?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I put more than one carousel on a page?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. The script starts every element with <code>data-carousel<\/code> on the page, so paste the HTML as many times as you need.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What happens when I click Fork to My Code?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Try it yourself<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <a href=\"https:\/\/webdevpuneet.com\/carousel-builder\/\">Carousel Builder<\/a>, 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 <a href=\"https:\/\/webdevpuneet.com\/navbar-builder\/\">Navbar Builder<\/a>, the <a href=\"https:\/\/webdevpuneet.com\/css-button-generator\/\">CSS Button Generator<\/a>, the <a href=\"https:\/\/webdevpuneet.com\/gradient-generator\/\">CSS Gradient Generator<\/a> for slide backgrounds and the <a href=\"https:\/\/webdevpuneet.com\/image-compressor\/\">Image Compressor<\/a> for your slide photos, or browse ready-made sliders in the <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/carousels\/\">UI Snippets carousel collection<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":133,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","advanced_seo_description":"Build a responsive carousel visually: slide, fade, zoom, flip and blur, autoplay, multi-item and vertical sliders. Copy HTML, CSS, JS or React. 15 live demos.","jetpack_seo_html_title":"Carousel Builder: Free HTML, CSS, JS & React Slider Maker","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[11],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools","et-has-post-format-content","et_post_format-et-post-format-standard"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phrh5V-28","jetpack_featured_media_url":"https:\/\/i0.wp.com\/webdevpuneet.com\/blog\/wp-content\/uploads\/2026\/10\/carousel-builder-header-1200x630-1.jpg?fit=1200%2C630&ssl=1","_links":{"self":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":1,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":134,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/132\/revisions\/134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media\/133"}],"wp:attachment":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}