Splide slider (1 main, 1 vertical, random images)

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>
      <div id="right">
        <div id="vertical-slider" class="splide">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <img...

CSS

#container {
  width: 100%;
}

#left {
  width: 800px;
  float: left;
}

#right {
  width: 150px;
  float: left;
}

JavaScript

const vertical = new Splide("#vertical-slider", {
        width: 150,
        height: 400,
        direction: "ttb",
        isNavigation: true,
        fixedWidth: 150,
        fixedHeight: 80,
        pagination: false,
        cover: true,
        focus: "center"
      });
      
      const main = new Splide("#main-slider", {
        type: 'fade',
        rewind: true,
        pauseOnHover: true,
        width: 800,
        speed: 500,
        interval: 1500,
        height: 400,
        cover: true,
        autoplay: true
      });

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