Splide slider (1 main, 1 thumbnail, 1 vertical)

by jmeile

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/themes/splide-skyblue.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
    <div id="container">
      <div id="left">
        <div id="main-slider" class="splide">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=1" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=2" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=3" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=4" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=5" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=6" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=7" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=8" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=9" />
              </li>
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=10" />
              </li>
            </ul>
          </div>
        </div>

        <div id="thumbnail-slider" class="splide">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <img src="https://source.unsplash.com/random?sig=1"...

CSS

#container {
  display: flex;
}

JavaScript

const main = new Splide("#main-slider", {
        width: 800,
        height: 400,
        cover: true
      });

      const thumbs = new Splide("#thumbnail-slider", {
        width: 800,
        isNavigation: true,
        fixedWidth: 150,
        fixedHeight: 80,
        pagination: false,
        cover: true,
        focus: "center"
      });

      const vertical = new Splide("#vertical-slider", {
        width: 150,
        height: 480,
        direction: "ttb",
        isNavigation: true,
        fixedWidth: 150,
        fixedHeight: 80,
        pagination: false,
        cover: true,
        focus: "center"
      });

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