Image Carousel Generator

Create a lightweight slider without pulling an entire UI framework into your page. Add images, alt text, captions, and optional links, then configure navigation and autoplay.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.stg-slide img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:contain}.stg-slider{touch-action:pan-y}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><section class="stg-slider stg-box" aria-roledescription="carousel" aria-label="Image slides"><article class="stg-slide"><img class="stg-image" src="https://scrollingtextgenerator.com/examples/logo-one.svg" alt="Example brand" width="200" height="80" loading="lazy"><h3><a href="https://example.com/" rel="noopener noreferrer">Example brand one</a></h3><p>New tools are available.</p></article><article class="stg-slide" hidden><img class="stg-image" src="https://scrollingtextgenerator.com/examples/logo-two.svg" alt="Example brand" width="200" height="80" loading="lazy"><h3><a href="https://example.com/" rel="noopener noreferrer">Example brand two</a></h3><p>Explore the guides.</p></article><div class="stg-controls"><button class="stg-button stg-prev" aria-label="Previous slide">←</button><button class="stg-button stg-next" aria-label="Next slide">→</button><button class="stg-dot" aria-label="Go to slide 1" data-index="0">1</button><button class="stg-dot" aria-label="Go to slide 2" data-index="1">2</button></div></section><script>const root=document.querySelector('.stg-slider'),slides=[...root.querySelectorAll('.stg-slide')];let current=0,hover=false;function show(i){current=(i+slides.length)%slides.length;slides.forEach((el,j)=>el.hidden=j!==current);root.querySelectorAll('.stg-dot').forEach((el,j)=>el.setAttribute('aria-current',String(j===current)));}root.querySelector('.stg-prev').onclick=()=>show(current-1);root.querySelector('.stg-next').onclick=()=>show(current+1);root.querySelectorAll('.stg-dot').forEach(el=>el.onclick=()=>show(+el.dataset.index));root.onkeydown=ev=>{if(ev.key==='ArrowRight')show(current+1);if(ev.key==='ArrowLeft')show(current-1)};let start;root.addEventListener('touchstart',ev=>start=ev.touches[0].clientX,{passive:true});root.addEventListener('touchend',ev=>{if(start!==undefined&&Math.abs(ev.changedTouches[0].clientX-start)>50)show(current+(ev.changedTouches[0].clientX<start?1:-1));start=undefined},{passive:true});root.onmouseenter=()=>hover=true;root.onmouseleave=()=>hover=false;show(0);</script></body></html>

What this generator does

Multiple slides with image, alt text, caption and link.
Previous/next buttons, dots, keyboard arrows and swipe gestures.
Optional autoplay that pauses on hover, focus, reduced motion, and hidden tabs.
Contain/cover modes and aspect-ratio controls.

How to use

Add images and meaningful alt text.
Choose the aspect ratio and fit mode.
Enable the navigation controls you want.
If autoplay is enabled, choose a relaxed interval and keep manual controls visible.
Preview at several viewport widths and copy the code.

Best practices

Do not autoplay too quickly.
Pause autoplay when the carousel receives keyboard focus.
Avoid putting critical content only on later slides.

Frequently asked questions

Is the carousel accessible by keyboard?

Yes. The generated version supports previous/next controls and arrow-key navigation with visible focus styles.

Can I turn autoplay off?

Yes. Manual navigation is the default recommended mode.

Related tools & guides

Brand Logos Scroller Generator

Create a continuously scrolling logo strip for sponsors, clients or partners. Control direction, speed, logo height, spacing, links and pause behavior.

Testimonial Slider Generator

Build a responsive testimonial slider with names, roles, photos, ratings and keyboard controls. Copy lightweight HTML, CSS and JavaScript.

Hero Section Generator

Design a responsive landing-page hero with headline, supporting text, CTA buttons, image or gradient background and copyable HTML/CSS.