Basic thumbnails

A row of clickable thumbnails below the main slider, always highlighting the active one. The plugin appends the thumbnail strip automatically after the slider container — no extra HTML needed.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>
<!-- .c--slider-a__thumbs is injected here by the plugin -->

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 220px; }

/* Thumbnail strip — injected by plugin */
.c--slider-a__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.c--slider-a__thumb {
  flex: 1;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
}
.c--slider-a__thumb--active {
  opacity: 1;
  border-color: #6C2BD9;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 220px;
  }

  &__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  &__thumb {
    flex: 1;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.45;
    border: 2px solid transparent;
    transition: opacity 0.2s, border-color 0.2s;

    &--active {
      opacity: 1;
      border-color: #6C2BD9;
    }
  }
}

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

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    arrows(),
    thumbnails({ clickable: true }),
  ],
})

Image thumbnails

The most common real-world use: a photo gallery where the main view shows the full image and the strip below shows cropped previews. Use object-fit: cover inside thumbnails for consistent proportions.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide img-slide" data-slide>
      <img src="/photos/01.jpg" alt="Photo 1" />
    </div>
    <div class="c--slider-a__slide img-slide" data-slide>
      <img src="/photos/02.jpg" alt="Photo 2" />
    </div>
    <!-- ...more slides -->
  </div>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; }

.img-slide { height: 280px; overflow: hidden; }
.img-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Thumbnails */
.c--slider-a__thumbs { display: flex; gap: 6px; margin-top: 6px; }
.c--slider-a__thumb {
  flex: 1; height: 64px; border-radius: 4px; overflow: hidden;
  cursor: pointer; opacity: 0.5; border: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
}
.c--slider-a__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c--slider-a__thumb--active { opacity: 1; border-color: #6C2BD9; }

.img-slide {
  height: 280px;
  overflow: hidden;
}

.img-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
  }

  &__thumbs {
    display: flex;
    gap: 6px;
    margin-top: 6px;
  }

  &__thumb {
    flex: 1;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    transition: opacity 0.2s, border-color 0.2s;

    &--active {
      opacity: 1;
      border-color: #6C2BD9;
    }
  }

  &__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

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

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    arrows(),
    thumbnails({ clickable: true }),
  ],
})