Thumbnails (Sync)

Use two Splide sliders and sync them up to create a gallery with thumbnail navigation and active state.

Config

<link href="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css
" rel="stylesheet">

<style>
.splide__track--nav>.splide__list>.splide__slide.is-active {
    border: 2px solid #fc7500;
    filter: brightness(100%);
}
</style>

<script type="module">
import splidejsSplide from "https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/+esm";

const splideMain = new splidejsSplide(".splide.main", {
  type: "loop",
  updateOnMove: true,
  perPage: 1,
  pagination: false,
  arrows: false,
});

const splideThumbs = new splidejsSplide(".splide.thumbs", {
  perPage: 6,
  updateOnMove: true,
  isNavigation: true,
  gap: "0.5rem",
  focus: "center",
  rewind: true,
  pagination: false,
  breakpoints: {
    768: {
      perPage: 4,
    },
  },
});

splideMain.sync(splideThumbs);

splideMain.mount();
splideThumbs.mount();
</script>