thumbs plugin

Syncs a thumbnail strip to the slider. Click any thumbnail to jump to that slide; the active thumbnail updates automatically as you navigate.

How it works

  1. You create a container with one child element per slide — these are your thumbnails.
  2. The plugin adds a click handler to each child that calls slider.goTo(i).
  3. On every slide change, the active class moves to the matching thumbnail.

Import

import { thumbs } from '@andresclua/sliderkit-plugins'

Usage

import { Slider } from '@andresclua/sliderkit'
import { thumbs } from '@andresclua/sliderkit-plugins'

new Slider('#el', {
  items: 1,
  loop: false,
  plugins: [
    thumbs({ container: '#my-thumbs' }),
  ],
})
<!-- one child per slide, in the same order -->
<div id="my-thumbs">
  <img src="thumb-1.jpg" alt="Slide 1">
  <img src="thumb-2.jpg" alt="Slide 2">
  <img src="thumb-3.jpg" alt="Slide 3">
</div>

Options

OptionTypeDefaultDescription
container string | HTMLElement — Required. The wrapper whose direct children are the thumb items. Must have exactly one child per real slide.
activeClass string 'sliderkit__thumb--active' CSS class applied to the active thumbnail.

Styling the active thumb

.sliderkit__thumb--active {
  outline: 3px solid #6C2BD9;
  outline-offset: 2px;
  opacity: 1;
}

/* dim inactive thumbs */
#my-thumbs > * {
  opacity: 0.4;
  transition: opacity 0.2s;
}

Notes

  • The number of children in container must match slideCount. Extra or missing thumbs will be out of sync.
  • Works with any element type — <img>, <div>, <button>, etc.
  • The plugin does not generate thumbnails — you provide the HTML.

Demo

See the thumbs demo →