おぼえがき

                  
document.addEventListener("DOMContentLoaded", function () {
// メインスライダー
  const main = new Splide(".splide-main", {
    type: "fade", // スライダーの切り替え表示：フェード
    rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す
    pagination: false, // ページネーション非表示
    arrows: true, // 矢印表示
  });

// サムネイル
  const thumbnails = new Splide(".thumbnail-carousel", {
    type: "loop", // スライドのループさせる
    perPage: 6, // サムネイルの表示枚数
    pagination: false, // ページネーション非表示
    isNavigation: true, // 他のスライダーのナビゲーションとしてそれぞれのスライドをクリック可能にする
    focus: "center", // アクティブなスライドを中央寄せ
    arrows: false, // 矢印非表示
  });

  main.sync(thumbnails);
  main.mount();
  thumbnails.mount();
});
                  
                

                  
     /* メイン・サムネイル */
    .splide__list {
      height: auto;
    }

    .splide__slide img {
      width: 100%;
      height: auto;
    }

    /* メイン */
    .splide-main {
      margin-bottom: 10px;
    }

    /* サムネイル */
    .splide__slide {
      opacity: 0.5;
    }

    .splide__track--nav>.splide__list>.splide__slide {
      border: none;
    }

    .splide__track--nav>.splide__list>.splide__slide.is-active {
      border: none;
      opacity: 1;
    }

    /* 矢印 */
    .splide__arrow--prev {
      left: -50px;
    }

    .splide__arrow--next {
      right: -50px;
    }