thumbnails

Renders a clickable thumbnail strip synced with the active slide. Thumbnails are generated from slide data-src or img[src].

Import

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

Usage

new Slider('#el', {
  plugins: [thumbnails({ clickable: true })],
})

Options

Option	Type	Default	Description
`el`	`string \| HTMLElement`	—	Container for thumbnails. Auto-created after slider container if omitted.
`clickable`	`boolean`	`true`	Click thumbnails to navigate.

Image source

The plugin reads thumbnail images from:

data-src attribute on the slide
src of the first img inside the slide

<!-- data-src on slide -->
<div class="c--slider-a__slide" data-src="/thumb-1.jpg">...</div>

<!-- img inside slide -->
<div class="c--slider-a__slide">
  <img src="/full-1.jpg" alt="..." />
</div>

Demo

View thumbnails demo →