Splide Thumbnail Gallery — Two Synced Sliders

Every product page needs the same thing: a large image, a row of thumbnails below it, and both staying in agreement no matter which one you touch. Hand-building it means writing two carousels and then a third layer of code to keep their indexes reconciled — and that reconciliation layer is where the bugs live. Click a thumbnail while the main slider is mid-transition, or drag past the loop boundary, and the two drift apart.

Splide solves this with a first-class API rather than a workaround, and it does it in one line.

sync(), and the ordering rule that breaks people

main.sync(thumbs);

That single call establishes a bidirectional relationship: moving the main slider moves the thumbnails, and clicking a thumbnail moves the main slider. There is no index bookkeeping to write and no event handlers to wire.

The critical detail is the order of the next three lines:

main.sync(thumbs); main.mount(); thumbs.mount();

sync() must be called before either slider is mounted. It works by subscribing to internal move events, and mount() is what fires the setup those subscriptions need to exist for. Call sync() after mounting and you get no error, no warning, and two completely independent sliders — which is a genuinely frustrating way to lose an hour, because everything looks correctly written.

isNavigation is doing more than it sounds

isNavigation: true on the thumbnail slider is what converts its slides from passive content into controls. It makes each slide focusable and clickable, adds the correct ARIA roles so the strip announces itself as a set of controls rather than a second gallery, and — the part the CSS depends on — adds an is-active class to whichever slide matches the main slider's current index.

That class is the entire styling hook:

.stg-thumbs .splide__slide.is-active .stg-thumb { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 0 2px #0d9488 }

Inactive thumbnails sit at 45% opacity, hover lifts them to 80%, and the active one goes fully opaque with a ring and a small rise. Using opacity as the primary signal rather than a border is deliberate: borders change an element's box and can shift the strip by a pixel as selection moves.

isActiveOnFocus: true extends the same behavior to keyboard focus, so tabbing through the strip previews each image rather than requiring a click.

focus: center, and why it matters with many images

focus: 'center' keeps the active thumbnail in the middle of the visible strip rather than wherever it happens to fall. With five images it is a nicety. With twenty it is essential — without it, the active thumbnail eventually sits at the edge of the viewport or scrolls out of view entirely, and the user loses track of where they are in the set.

fixedWidth and fixedHeight are the right sizing choice for thumbnails specifically. perPage would divide the available width by a slide count, so thumbnails would resize as the viewport changes; fixed dimensions keep them a consistent, predictable size and simply show more or fewer as space allows. The breakpoints block shrinks them below 480px so a phone still shows several rather than two enormous ones.

The main slider's settings

type: 'loop' lets the gallery wrap from last to first, which is expected behavior in a product viewer. Splide handles the slide cloning internally, and sync() correctly maps cloned indexes back to real ones — one of the specific things that is painful to get right by hand.

dragAngleThreshold: 40 is a mobile detail worth knowing. It sets how many degrees off horizontal a drag can be before Splide ignores it and lets the page scroll instead. The default is tighter; raising it to 40 means a slightly diagonal swipe still changes the image, while a mostly-vertical one scrolls the page. Getting this wrong produces a gallery that either steals every scroll attempt or feels unresponsive to swipes.

Reusing it

Replace the gradient placeholders with real <img> tags — keep the .splide__track and .splide__list structure exactly, since Splide queries for those class names specifically. Add loading="lazy" to everything except the first image. For a lightbox on click, pair it with an image lightbox; for a zoom-on-hover detail view, an image magnifier sits naturally over the main slide.