Related Snippets

61 in Carousels & Sliders category
55–60 of 60
Momentum Drag Carousel

Momentum Drag Carousel

Fan-Expand Card Carousel

Fan-Expand Card Carousel

Autoplay Progress-Bar Carousel

Autoplay Progress-Bar Carousel

Split-Panel Comparison Carousel

Split-Panel Comparison Carousel

Radial / Circular Carousel

Radial / Circular Carousel

Synced Main + Thumbnail Carousel

Synced Main + Thumbnail Carousel

Synced Main + Thumbnail Carousel — HTML CSS JS Snippet

Synced Main + Thumbnail Carousel · Carousels · Plain HTML, CSS & JS · Live preview

CategoryCarousels & Sliders
TagsKeyboard NavigationMedia Player

What's included

Features

One shared "current" index drives both the main image and the thumbnail strip — they can never fall out of sync
Thumbnails generated dynamically from the main slides — no second markup list to maintain
Active thumbnail auto-scrolls into view in its own strip via scrollIntoView
Smooth translateX sliding on the main track, GPU-friendly and export-safe
Arrow buttons, clickable thumbnails, and Left/Right arrow keys all route through the same navigation function
Horizontally scrollable thumbnail strip that works at any slide count without a layout redesign

About this UI Snippet

Synced Main + Thumbnail Carousel — One State, Two Views

Screenshot of the Synced Main + Thumbnail Carousel snippet rendered live

Product galleries never show just one carousel — they show a big image plus a row of thumbnails that both control and reflect it. This snippet builds that with a single source of truth: one current index. The main track slides via translateX, the matching thumbnail gets an active border, and — the detail most hand-rolled versions skip — the active thumbnail calls scrollIntoView on itself so it's never left off-screen in its own scrollable strip while the main image has already moved on.

Thumbnails generated, not duplicated by hand

Rather than writing the thumbnail row's markup twice (once for the big slides, once for the small previews), the JS builds each thumbnail from its matching slide's own background style at load time. Add a sixth slide to the main track and a sixth thumbnail appears automatically, already wired to the same click handler — there's no second list to keep in sync by hand.

Every input path funnels through one function

Clicking a thumbnail, clicking an arrow, and pressing an arrow key all call the same goTo/next/prev functions, which all end in the same render(). That's what guarantees the main image and the thumbnail row can never drift out of sync with each other — there's exactly one place that decides what "current" means, and every interaction updates it the same way.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA large image appears above a row of small thumbnails, the first one highlighted.
  2. 2
    Click a thumbnailThe main image slides to match, and that thumbnail gets the active border.
  3. 3
    Click the arrowsThe main image advances and the thumbnail row auto-scrolls to keep the active one in view.
  4. 4
    Use arrow keysLeft/Right steps through the gallery without touching the mouse.
  5. 5
    Swap in real photosReplace each slide's background gradient with a real product photo — the thumbnails pick it up automatically.

Real-world uses

Common Use Cases

Product image galleries
The exact pattern every e-commerce product page uses — a big photo with a thumbnail strip beneath it.
Portfolio and case-study viewers
Let visitors jump directly to a specific screenshot instead of clicking next repeatedly.
Real estate and listing photo tours
Thumbnails give an at-a-glance sense of how many photos there are and what's in them.
Recipe or tutorial step previews
Pair each main image with a labeled thumbnail so users can jump straight to a specific step.

Got questions?

Frequently Asked Questions

Add a caption element inside each .stc-slide, and optionally read its text into a shared caption element below the main track inside render() based on the current index.

Yes — change .stc-thumbs from overflow-x: auto to flex-wrap: wrap; the auto-scroll-into-view call in render() becomes a no-op harmlessly since everything is already visible.

Track touchstart/touchend clientX on .stc-main, and if the horizontal delta exceeds a small threshold, call next() or prev() — the same pattern used in this library's other touch-enabled carousels.

translateX with a CSS transition gives precise, synchronized control over exactly one slide at a time and works identically across browsers — native scroll-snap is a valid alternative but couples the thumbnail sync to scroll events instead of a single state variable.

The arrows and thumbnails are real <button> elements with descriptive aria-labels, and the whole thing is operable via Left/Right arrow keys with no mouse required.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain why every navigation path (thumbnail click, arrow click, arrow key) is written to call the same goTo/next/prev functions rather than each updating the DOM directly — and what class of bug that single-source-of-truth pattern prevents. It's also a good exercise to ask the assistant to add pinch-zoom on the main image, or to make the thumbnail strip reorder via drag-and-drop while keeping the main track in sync with the new order.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a product-gallery-style carousel in plain HTML, CSS, and vanilla JavaScript with a large main image synced to a row of small thumbnails — no library.

Requirements:
- A main image area showing one slide at a time via a horizontally sliding track (translateX transform with a CSS transition), with previous/next arrow buttons overlaid on it.
- A separate horizontally-scrollable strip of thumbnail buttons below the main image, generated dynamically in JavaScript from the same slide data the main track uses (not duplicated by hand in the HTML) — each thumbnail's click handler must jump the main image directly to that slide.
- A single shared "current index" variable that is the only source of truth for which slide is active; every interaction (thumbnail click, arrow click, arrow key) must update this one variable and then re-render both the main track's position and every thumbnail's active/inactive state from it, so the two views can never disagree with each other.
- When the current slide changes, the matching thumbnail must scroll itself into view within its own scrollable strip if it is not already fully visible, using scrollIntoView with smooth behavior.
- Left/Right arrow key support performing the same next/previous action as the arrow buttons.
- The active thumbnail must be visually distinguished (e.g. a colored border) from the inactive ones, updated every time the current index changes.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

<div class="stc-wrap">
  <div class="stc-main">
    <div class="stc-track" id="stcTrack">
      <div class="stc-slide" style="background:linear-gradient(160deg,#6366f1,#4338ca)"><span>👟</span></div>
      <div class="stc-slide" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)"><span>👟</span></div>
      <div class="stc-slide" style="background:linear-gradient(160deg,#ec4899,#9d174d)"><span>👟</span></div>
      <div class="stc-slide" style="background:linear-gradient(160deg,#10b981,#047857)"><span>👟</span></div>
      <div class="stc-slide" style="background:linear-gradient(160deg,#f59e0b,#b45309)"><span>👟</span></div>
    </div>
    <button class="stc-arrow stc-arrow-left" id="stcPrev" aria-label="Previous image">‹</button>
    <button class="stc-arrow stc-arrow-right" id="stcNext" aria-label="Next image">›</button>
  </div>
  <div class="stc-thumbs" id="stcThumbs"></div>
</div>