<section
  id="main-carousel"
  class="splide"
  aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります"
  >
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide"><img src="https://picsum.photos/id/1/600/600" alt="splide01" width="600" height="600"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/2/600/600" alt="splide02" width="600" height="600"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/3/600/600" alt="splide03" width="600" height="600"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/4/600/600" alt="splide03" width="600" height="600"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/5/600/600" alt="splide03" width="600" height="600"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/6/600/600" alt="splide03" width="600" height="600"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/7/600/600" alt="splide03" width="600" height="600"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/8/600/600" alt="splide03" width="600" height="600"></li>
      </ul>
    </div>
  </section>

  <section
  id="thumbnail-carousel"
  class="splide"
  aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります"
  >
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide"><img src="https://picsum.photos/id/1/200/200" alt="splide01" width="200" height="200"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/2/200/200" alt="splide02" width="200" height="200"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/3/200/200" alt="splide03" width="200" height="200"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/4/200/200" alt="splide03" width="200" height="200"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/5/200/200" alt="splide03" width="200" height="200"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/6/200/200" alt="splide03" width="200" height="200"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/7/200/200" alt="splide03" width="200" height="200"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/8/200/200" alt="splide03" width="200" height="200"></li>
      </ul>
    </div>
  </section>
.splide {
  margin-bottom: 40px;
}
.splide__slide img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}
#splide03 {
  .splide__arrows {
    .splide__arrow {
      width: 3em;
      height: 3em;
      background-color: #9BC187;
    }
    .splide__arrow svg {
      fill: #fff;
    }
  }
  
  .splide__pagination {
    counter-reset: pagination-num;
    bottom: -4em;
    gap: 1em;
  }
  .splide__pagination__page {
    width: 3em;
    height: 3em;
  }
  .splide__pagination__page.is-active {
    background-color: #9BC187;
  }
  .splide__pagination__page:before {
    counter-increment: pagination-num;
    content: counter( pagination-num );
  }
}
View Compiled 
document.addEventListener( 'DOMContentLoaded', function() {
    const splide = new Splide( '#splide' );
    splide.mount();

  
    const splide02 = new Splide( '#splide02', {
      type       : 'loop',
      speed      : 400,
      width      : '100%',
      perPage    : 2,
      perMove    : 2,
      gap        : '2rem',
      padding    : '1rem',
      arrows     : true,
      pagination : true,
      autoplay   : false,
      breakpoints: {
        640: {
          width  : '100%',
          perPage: 1,
        },
      },
    } );
  
    splide02.mount();
  
  const splide03 = new Splide( '#splide03', {
      type       : 'loop',
      speed      : 400,
      width      : '100%',
      perPage    : 2,
      perMove    : 2,
      gap        : '2rem',
      padding    : '1rem',
      arrows     : true,
      arrowPath  : 'M31 19.5L14.5 36.3875L14.5 2.6125L31 19.5Z',
      pagination : true,
      autoplay   : false,
      breakpoints: {
        640: {
          width  : '100%',
          perPage: 1,
        },
      },
    } );
  
    splide03.mount();
} );

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.min.js