Splide slider (1 main, 1 vertical with text, own images, autosize)

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%;
}

body {
  height: 100%;
}

JavaScript

//Offset if there is a right floated element or a navigation
  const containerOffset = 3;
  const numSlides = 10;
  const maxMainSliderWidth = 1100;
  const maxMainSliderHeight = 650;
  const minMainSliderWidth = 380;
  const minMainSliderHeight = 225;
  const thumbnailSliderWidth = 312;
  //console.log("maxMainSliderWidth: " + maxMainSliderWidth);
  //console.log("maxMainSliderHeight: " + maxMainSliderHeight);

  const thumbnailWidth = 124;
  const thumbnailScale = thumbnailWidth / maxMainSliderWidth;
  const thumbnailHeight = Math.trunc(maxMainSliderHeight * thumbnailScale);
  //console.log("thumbnailWidth: " + thumbnailWidth);
  //console.log("thumbnailHeight: " + thumbnailHeight);

  var mainSliderWidth = maxMainSliderWidth;
  var mainSliderHeight = maxMainSliderHeight;
  var thumbnailSliderHeight = mainSliderHeight;
  var stopResize = false;
  calculateDimensions();
  initCSS();

  const vertical = new Splide("#vertical-slider", {
    direction: "ttb",
    cover: true,
    focus: "center",
    isNavigation: true,
    pagination: false,
    autoplay: true,
    rewind: true,
    pauseOnHover: true,
    speed: 500,
    interval: 1500,
    height: thumbnailSliderHeight,
    width: thumbnailSliderWidth,
    fixedWidth: thumbnailSliderWidth,
    fixedHeight: thumbnailHeight,
  });

  const main = new Splide("#main-slider", {
    width: mainSliderWidth,
    height: mainSliderHeight,
    type: 'fade',
    cover: true,
  });
  vertical.sync(main).mount();
  main.mount();

  function calculateDimensions() {
    //console.log( 'Window resized' );
    var container_element = document.getElementById("jm-slider-container").parentElement;
    var containerWidth = container_element.clientWidth - containerOffset;
    //console.log("containerWidth: " + containerWidth);
    
    mainSliderWidth = maxMainSliderWidth;
    mainSliderHeight = maxMainSliderHeight;
    var mainScale = 1;
    if (containerWidth < maxMainSliderWidth + thumbnailSliderWidth) {
      mainSliderWidth =...