Splide slider (1 main, 1 vertical with text, own 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="jm-slider-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://www.iwf.mavt.ethz.ch/about/specialist_areas/ai_manufacturing.png" />
              </li>
              <li class="splide__slide">
                <img src="https://www.iwf.mavt.ethz.ch/about/specialist_areas/am_dp_welding.png" />
              </li>
              <li class="splide__slide">
                <img src="https://www.iwf.mavt.ethz.ch/about/specialist_areas/am_pol_ceramics.png" />
              </li>
              <li class="splide__slide">
                <img src="https://www.iwf.mavt.ethz.ch/about/specialist_areas/ed_machining.png" />
              </li>
              <li class="splide__slide">
                <img src="https://www.iwf.mavt.ethz.ch/about/specialist_areas/laser_ablation.png" />
              </li>
              <li class="splide__slide">
                <img src="https://www.iwf.mavt.ethz.ch/about/specialist_areas/machine_tool_analysis.png" />
              </li>
              <li class="splide__slide">
                <img src="https://www.iwf.mavt.ethz.ch/about/specialist_areas/meshfree_methods.png" />
              </li>
              <li class="splide__slide">
                <img src="https://www.iwf.mavt.ethz.ch/about/specialist_areas/powerbed_am.png" />
              </li>
              <li class="splide__slide">
                <img src="https://www.iwf.mavt.ethz.ch/about/specialist_areas/sawing_grinding.png" />
              </li>
              <li class="splide__slide">
                <img...

CSS

#jm-slider-container {
  width: 100%;
}

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

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

#right img {
  /*width: 122px;*/
  height: 68px;
  margin: 0;
  padding: 0;
  /*vertical-align: middle;*/
}
.jm-thumbnail {
  float: left;
  width: 124px;
  height: 74px;
  margin: 0;
  padding: 0;
}

.jmcaption, .jm-link {
  margin: 0;
  padding: 0;
}

.jmcaption {
  padding-top: 4px;
}

#right .splide__slide, .jm-slide-container {
  position: relative;
  font-size: 14px;
}

.jm-slide-container {
  height: 68px;
  margin: 0;
  padding: 0;
  padding-right: 4px;
  border: solid 1px #000;
}

.jm-link {
  position:absolute;
  bottom: 0;
  right: 0;
  padding-right: 4px;
  padding-bottom: 4px;
}

.jm-caption {
  padding-left: 4px;
}

.splide--ttb > .splide__arrows .splide__arrow, .splide--ttb > .splide__slider > .splide__track > .splide__arrows .splide__arrow, .splide--ttb > .splide__track > .splide__arrows .splide__arrow  {
  left: 20%;
}

JavaScript

const max_photo_width = 1366;
      const max_photo_height = 808;

      const vertical = new Splide("#vertical-slider", {
        direction: "ttb",
        width: 312,
        height: 264,
        fixedWidth: 312,
        fixedHeight: 74,
        cover: true,
        focus: "center",
        
        isNavigation: true,
        pagination: false,
        autoplay: true,
        rewind: true,
        pauseOnHover: true,
        speed: 500,
        interval: 1500,
      });
      
      const main = new Splide("#main-slider", {
        type: 'fade',
        width: 446,
        height: 264,
        cover: true,
      });
      vertical.sync(main).mount();
      main.mount();