AI Carousel Generator.

Describe what rotates — product shots, quotes, logos, video cards — and MeDo generates a carousel built around the part everyone else skips: a first slide that carries the message on its own, controls that are real buttons with honest disabled ends, swipe that never hijacks vertical scrolling, and autoplay that politely stays home unless you insist.

Nobody Waits for Slide Two

Carousels fail in a specific, measurable way: when a hero rotates on its own, only about one visitor in a hundred ever interacts with it, and the large majority of those clicks land on the first slide — the finding behind the Notre Dame homepage study that made banner blindness famous. The mechanism is simple: motion at the top of a page reads as advertising, so people route around it and read what sits still. Notice that this indicts autoplay, not the pattern itself. A carousel the user drives — a product gallery they swipe, a testimonial they page through, a logo strip drifting behind a headline — is a genuinely good interface for browsing visual content on a phone. So treat rotation as something the visitor initiates: slide one carries the whole message, controls are real buttons with disabled ends, autoplay stays off unless you can defend it, and prefers-reduced-motion collapses the whole thing into a quiet stack.

4 個のテンプレート

生成できる Carousel テンプレート

どのテンプレートもスクリーンショットではなく実際のプロンプトです。任意の AI エディタに貼り付けるか、MeDo で実行して React + Tailwind のコードを受け取れます。

CommerceProduct Gallery

Thumbnail-Driven Product Carousel

The highest-intent carousel on the internet: the buyer is already looking. Thumbs drive the viewport, swipe is native scroll-snap, nothing autoplays, and position is always visible.

Create a product image gallery: a main viewport using CSS scroll-snap with one slide per view, and a thumbnail rail below where the active thumb gets an indigo-600 ring, syncing in both directions as the user scrolls or clicks. Prev and Next buttons overlay the viewport edges, disabled at 30% opacity at the ends. Arrow keys work while focus is inside the region. Each image lazy-loads behind a zinc-100 shimmer and carries alt text from the product data; a failed image renders a neutral tile instead of a broken icon. Show an image count like 3 of 8 in the corner, keep touch swipe from ever blocking vertical page scroll, and give every control a visible focus ring.

MeDoで試す

Social proofTestimonial Rotator

One Quote at a Time, User-Paged

A single strong quote fills the space instead of a three-column wall. Dots and arrows page through; nothing moves unless the visitor asks.

Create a testimonial carousel showing one large quote at a time: 24px medium text, author name and role, a 48px round avatar, centered with 64px vertical padding on a zinc-50 band. Navigate with 32px circular arrow buttons and a dot indicator where the active dot is a 16px indigo-600 pill. Slides transition over 250ms as a translateX; keep inactive slides in the DOM but aria-hidden with untabbable links. The region carries aria-roledescription="carousel", each slide is a group labeled 2 of 5, and a polite aria-live region reads the new author on change. No autoplay. Every control gets a focus-visible ring, and on mobile native swipe works via scroll-snap with the dots staying in sync.

MeDoで試す

MotionLogo Marquee

Slow Infinite Logo Loop

For twenty-plus marks that cannot fit a static row. Slow, edge-masked, paused on hover — and standing perfectly still for reduced-motion visitors.

Build an infinite logo marquee: 16 grayscale logos at a uniform 28px height scrolling left in a seamless loop — a duplicated track animated with CSS translating -50% over 40s linear for a gapless cycle. Add fade masks on both edges so logos dissolve at the boundaries instead of clipping. Pause the animation on hover and while focus is inside the region, and under prefers-reduced-motion replace the marquee entirely with a static wrapped grid showing every logo. Each logo has an accessible name and links to nothing. Keep the strip 120px tall so it stays a quiet endorsement, and mark the duplicated decorative track aria-hidden so screen readers hear the list exactly once.

MeDoで試す

Use with careHero Slider

The Full-Bleed Homepage Slider

The pattern that gave carousels their bad name — included with its defenses built in: slide one must convert alone, and rotation is a bonus almost nobody will see.

Create a full-height hero slider with three slides, each a full-bleed background image under a 40% dark overlay with a headline, one sentence and a primary CTA. Treat slide one as the only slide that matters: its copy must stand alone. Auto-advance after 7 seconds, pausing on hover, on focus anywhere inside the region, and permanently after any interaction with the controls. Progress indicators are clickable bars whose fill animates the time to the next slide. Under prefers-reduced-motion, disable autoplay entirely and crossfade with opacity only. The region is announced as a carousel, dots are real buttons with labels like Go to slide 2, and only the visible slide's CTA is focusable.

MeDoで試す

Carousel をカスタマイズする方法

Autoplay is an opt-in you will probably regret

If you must have it: 7 seconds per slide minimum, pause on hover and on focus anywhere inside the region, stop permanently after the user touches any control, and turn it off entirely under prefers-reduced-motion. Anything faster and you are cycling content away from people who are reading it — the exact behavior that taught the internet to ignore carousels.

Build rotation on scroll-snap, not transforms

An overflow-x container with snap points gives you touch momentum, trackpad inertia and keyboard scrolling from the browser, and a vertical page swipe still scrolls the page instead of fighting your track. Transform-based tracks need you to re-implement all of that by hand and usually get touch-gestures wrong in ways a demo on a desktop never reveals.

Slide one is the whole message

Design, copy and CTA the first slide as if the others do not exist, because for most visitors they don't. If the announcement lives on slide three, it does not exist. Run the carousel for a month with event tracking on the controls and you will have the numbers to kill autoplay in your own data.

Loop only when position does not matter

A product gallery should stop: disabled buttons at the ends tell the shopper where they are in the set, and wraparound makes 'I saw something four images back' a search problem. A logo marquee should loop, because nobody is navigating it — it is ambient texture. Decide which kind yours is before generating, since the two want different controls.

Carousel コンポーネントを使うのは誰か

E-commerce product page

The highest-intent carousel on the web: the buyer is already looking. A snap-scrolling viewport with a syncing thumbnail rail, no autoplay, alt text from the product data, and a count like 3 of 8 in the corner.

Agency or portfolio site

Case-study cards with an edge-peek layout — the next card visibly waiting at the viewport edge — so the swipe invitation is the design. Manual only; the work should be examined, not flashed past.

SaaS homepage testimonial strip

One large quote at a time with dot navigation, replacing a three-column quote grid that reads as a wall. Rotation stays manual; the dots are real buttons so a keyboard user can reach quote four at all.

News or media section

A latest-episodes or top-stories rail of video and article cards. The carousel form fits because the set is genuinely long and ordered by recency — the two conditions under which horizontal paging beats a tall stack.

サイト種別ごとの Carousel パターン

同じ carousel コンポーネントを、掲載するサイトの種類に合わせて調整します。

01 / 04

E-commerce Product Pages

Galleries where every slide was chosen by the merchant and every view is user-initiated — the two conditions that make carousels defensible. Keep the count visible and the thumbnails in sync; a shopper who loses their place abandons the gallery, not just the slide.

Carousel のスタイルとバリアント

ページ全体のトーンに合うバリアントを選び、そのまま生成します。

01 / 04

Edge-Peek Cards

Slides show at 85% width so the next card visibly waits at the viewport edge. The peek converts better than arrows because it makes the existence of more content impossible to miss — the core failure mode of every full-width carousel.

React・Next.js・Vue・Svelte での Carousel

React、Next.js、Vue 3、SvelteKit、Astro、素の HTML — 同じ carousel を 6 通りの方法で組み込めます。

01 / 03

React Carousel

A ref to the snap container and one goTo function: the browser's scroll-snap handles the motion, React only does the math. Disabled ends come free from comparing index to count.

src/components/Carousel.tsx

const track = useRef<HTMLDivElement>(null)
const [index, setIndex] = useState(0)

function goTo(next: number) {
  const el = track.current
  if (!el) return
  const clamped = Math.max(0, Math.min(next, slides.length - 1))
  setIndex(clamped)
  el.scrollTo({ left: el.clientWidth * clamped, behavior: 'smooth' })
}

// <button disabled={index === 0} onClick={() => goTo(index - 1)}>Previous</button>

Carousel をプロジェクトに追加する方法

carousel テンプレートを選んで本番に載せるまでの 4 ステップ。

01~2min

Decide Whether the Content Needs Paging at All

Run the honest checklist: six or more items, visual content, user-initiated browsing, and a first item that satisfies people who never page. Compare items side by side? Use a grid. Three items? Stack them. If the carousel fails the checklist, generating one is the expensive way to hide content.

02~1min

Choose the Drive Model: Thumbs, Arrows, or Swipe

Non-linear browsing wants a thumbnail rail; linear browsing wants arrows plus swipe; ambient texture wants a loop with no controls at all. This choice decides the markup, so make it before generating rather than after.

03~3min

Generate and Take the Controls Manually

MeDo hands you the carousel as working React + Tailwind code, preview included — Then use the thing with your hands: swipe through on a phone or a touch emulator, arrow through with the keyboard, watch the disabled states appear at the ends, and confirm a vertical swipe still scrolls the page.

04~2min

Kill the Autoplay (or Tame It)

The default you generate should not rotate on its own. If a template ships with autoplay and you truly want it, say so with the conditions: 7-second minimum, pause on hover and focus, permanent stop after interaction, and full off under prefers-reduced-motion. Then check slide-one click share in your analytics after a month.

Carouselに関するよくある質問

Do carousels hurt conversions?

Hero carousels usually do. The best-known interaction study — Notre Dame tracking its own homepage rotation — found roughly 1% of visitors clicked any slide at all, and the overwhelming majority of those clicks went to slide one. Motion at the top of a page is processed as advertising and routed around, so the slides after the first are effectively invisible. User-driven carousels are a different story: product galleries and manually paged testimonial strips perform well because the visitor asked for the rotation. The pattern is not the problem; uninvited autoplay is.

Should my carousel autoplay?

Default to no. If autoplay has a real job — an ambient logo marquee, a lobby display — wire the safety features in the same prompt: at least 7 seconds per slide, pause on hover and focus, permanent stop after any user interaction with the controls, and no motion at all under prefers-reduced-motion. Never autoplay anything with sentences on it: reading speed varies, and a slide that rotates mid-sentence is content the visitor cannot finish. And never autoplay a hero — that is the setup behind every banner-blindness statistic.

How do I make a carousel accessible?

Wrap it in role="region" with aria-roledescription="carousel", give each slide role="group" with an aria-label like "3 of 8", and make Previous, Next and every dot real buttons with names. Keep inactive slides in the DOM but aria-hidden with their links untabbable, and route slide changes through a polite aria-live region so screen-reader users hear what sighted users see. One counterintuitive rule: while autoplay is running, the live region should stay quiet — announcing every rotation is its own assault. MeDo generates this wiring from the prompt; retrofitting it onto a transform-based slider is the painful path.

How should swipe work on mobile?

Let the browser do it: an overflow-x container with CSS scroll-snap gives you native touch momentum, and — critically — a vertical swipe still scrolls the page. This is where transform-based sliders earn their bad reputation: they attach touch handlers that cannot tell a horizontal flick from a vertical one, so users get trapped in the carousel while trying to scroll past it. With snap containers, Previous and Next become a progressive enhancement for desktop rather than a load-bearing gesture layer.

Should the carousel loop or stop at the end?

Stop when the visitor is navigating — galleries and testimonial rotators should hit a disabled button at the last slide, because position is information and infinite wraparound turns 'go back two' into a memory task. Loop when the carousel is ambient — a logo marquee nobody tracks. CSS scroll-snap has no native loop, so looping means cloning slides for the seam, which is exactly the kind of fiddly detail to name in the prompt rather than hand-wave.

Is a carousel the wrong choice for my content?

Usually, yes. If the visitor needs to compare items side by side, a grid wins — a carousel shows one thing at a time by design. If the content is the page's main message, it should not rotate. If the set is three items, just stack them; paging controls for three things are ceremony. The honest checklist for a carousel: a long set (six or more), visual content, user-initiated browsing, mobile-first audience, and a first item that satisfies everyone who never pages. Fail two of those and a static layout is the better component.

carouselを今すぐ生成。

プロンプトを試す — 無料、登録不要。

無料で構築開始料金を見る

ギャラリー

欲しいグリッドを説明するだけで、MeDoが数秒で完全にスタイリングされた画像ギャラリーを生成します。マソンリーレイアウト、ライトボックスオーバーレイ、ホバーエフェクト、レスポンシブブレークポイント — すべてが1つのプロンプトから。

関連コンポーネント

お客様の声

必要なソーシャルプルーフセクションを説明してください — 引用スタイル、星評価、アバターレイアウト、グリッドまたはカルーセル — MeDoが数秒で本番対応コードを生成します。お客様に売り込んでもらいましょう。

関連コンポーネント

Logo Cloud

A logo cloud is borrowed trust: six or eight recognizable marks, rendered small, grayscale and quiet, saying "companies like these already chose you". Describe whose logos you display and how, and MeDo generates the section — a static row that never moves, a responsive grid, or a slow marquee — with proper alt text and mobile wrapping, in React + Tailwind.

関連コンポーネント

カード

カードに何を入れるかを説明すれば、MeDoがコンテナ全体を生成します — メディア・ヘッダー・ボディ・フッターのスロット、ホバー時のエレベーション、aspect-ratioで固定された画像、グリッド内で揃う高さ、そして対応するスケルトン状態まで。

関連コンポーネント