ITサポートやWEBサイト制作のご相談受付中 >

a
ホーム » WEBデザイン » Keen-Slider.jsで自動で切り替わるサムネイル付きスライドを実装する方法

Keen-Slider.jsで自動で切り替わるサムネイル付きスライドを実装する方法

2025/08/18 | WEB, WEBデザイン

今回はJavaScriptのスライダーライブラリ「Keen-Slider」を使って、自動で切り替わるサムネイル付きスライドをWEBサイトに表示する方法をご紹介します。

サムネイル付きスライドの完成イメージ

メインのスライドが自動で切り替わり、それに連動してサムネイルスライドもアクティブな状態が切り替わる仕組みです。

サムネイルをクリックすると、メインスライドも切り替わります。

必要なコード(全体)

まずは、すべてのコードをまとめてご紹介します。

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
    />

    <style>
      .main {
        height: 400px;
      }

      .thumbnail {
        height: 100px;
      }

      .slide1 {
        background-color: #ff7f7f;
      }

      .slide2 {
        background-color: #ff7fff;
      }

      .slide3 {
        background-color: #7f7fff;
      }

      .slide4 {
        background-color: #7fffff;
      }

      .slide5 {
        background-color: #7fff7f;
      }

      .slide6 {
        background-color: #ffff7f;
      }

      .thumbnail .keen-slider__slide {
        opacity: 0.5;
        cursor: pointer;
      }

      .thumbnail .active {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js"></script>

    <div class="wrap-content">
      <div class="main keen-slider">
        <div class="slide1 keen-slider__slide">スライド1</div>
        <div class="slide2 keen-slider__slide">スライド2</div>
        <div class="slide3 keen-slider__slide">スライド3</div>
        <div class="slide4 keen-slider__slide">スライド4</div>
        <div class="slide5 keen-slider__slide">スライド5</div>
        <div class="slide6 keen-slider__slide">スライド6</div>
      </div>
      <div class="thumbnail keen-slider">
        <div class="slide1 keen-slider__slide">スライド1</div>
        <div class="slide2 keen-slider__slide">スライド2</div>
        <div class="slide3 keen-slider__slide">スライド3</div>
        <div class="slide4 keen-slider__slide">スライド4</div>
        <div class="slide5 keen-slider__slide">スライド5</div>
        <div class="slide6 keen-slider__slide">スライド6</div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        function AutoSwitchSlidePlugin() {
          return (slider) => {
            let timeoutID;
            function setSwitchSlideTimer() {
              clearTimeout(timeoutID);
              timeoutID = setTimeout(() => {
                slider.next();
              }, 4000);
            }

            slider.on("created", setSwitchSlideTimer);
            slider.on("animationEnded", setSwitchSlideTimer);
            slider.on("updated", setSwitchSlideTimer);
          };
        }

        function ThumbnailLinkedPlugin(mainSlider) {
          return (slider) => {
            function removeCurrentSlideStatus() {
              slider.slides.forEach((slide) => {
                slide.classList.remove("active");
              });
            }

            function addCurrentSlideStatus(idx) {
              slider.slides[idx].classList.add("active");
            }

            function addSwitchSlidesEvent() {
              slider.slides.forEach((slide, idx) => {
                slide.addEventListener("click", () => {
                  mainSlider.moveToIdx(idx);
                });
              });
            }

            slider.on("created", () => {
              addCurrentSlideStatus(slider.track.details.rel);
              addSwitchSlidesEvent();
              mainSlider.on("animationStarted", (mainSlider) => {
                removeCurrentSlideStatus();
                let nextSlide = mainSlider.animator.targetIdx || 0;
                addCurrentSlideStatus(mainSlider.track.absToRel(nextSlide));
                slider.moveToIdx(Math.min(slider.track.details.maxIdx, nextSlide));
              });
            });
          };
        }

        let mainSlider = new KeenSlider(
          ".main",
          {
            loop: true,
          },
          [AutoSwitchSlidePlugin()]
        );

        let thumbnailSlider = new KeenSlider(
          ".thumbnail",
          {
            initial: 0,
            slides: {
              perView: 6,
            },
          },
          [ThumbnailLinkedPlugin(mainSlider)]
        );
      });
    </script>
  </body>
</html>

各コードの解説

Keen-Sliderを読み込む

CDNを利用してKeen-Sliderを読み込みます。

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js"></script>

スライドのHTMLを構築する

スライドの基本的なHTMLを構築します。

今回は6枚のスライドとして、メインスライドとサムネイルスライドで同じ内容を用意します。

    <div class="wrap-content">
      <div class="main keen-slider">
        <div class="slide1 keen-slider__slide">スライド1</div>
        <div class="slide2 keen-slider__slide">スライド2</div>
        <div class="slide3 keen-slider__slide">スライド3</div>
        <div class="slide4 keen-slider__slide">スライド4</div>
        <div class="slide5 keen-slider__slide">スライド5</div>
        <div class="slide6 keen-slider__slide">スライド6</div>
      </div>
      <div class="thumbnail keen-slider">
        <div class="slide1 keen-slider__slide">スライド1</div>
        <div class="slide2 keen-slider__slide">スライド2</div>
        <div class="slide3 keen-slider__slide">スライド3</div>
        <div class="slide4 keen-slider__slide">スライド4</div>
        <div class="slide5 keen-slider__slide">スライド5</div>
        <div class="slide6 keen-slider__slide">スライド6</div>
      </div>
    </div>

「keen-slider」が付くクラスは固定で必要です。

その他、メインスライドとサムネイルスライドを区別するためのクラス（main、thumbnail）とスライド番号を示すクラス（slide1、slide2…）を追加しています。

CSSでスライドのスタイルを設定する

スライドの表示を調整するためのCSSを設定します。

    <style>
      .main {
        height: 400px;
      }

      .thumbnail {
        height: 100px;
      }

      .slide1 {
        background-color: #ff7f7f;
      }

      .slide2 {
        background-color: #ff7fff;
      }

      .slide3 {
        background-color: #7f7fff;
      }

      .slide4 {
        background-color: #7fffff;
      }

      .slide5 {
        background-color: #7fff7f;
      }

      .slide6 {
        background-color: #ffff7f;
      }

      .thumbnail .keen-slider__slide {
        opacity: 0.5;
        cursor: pointer;
      }

      .thumbnail .active {
        opacity: 1;
      }
    </style>

サムネイルスライドは半透明を初期状態として、アクティブになると透過なしで表示されるスタイルを設定しています。

また、サムネイルスライドをマウスホバーしたときのカーソルをポインターへ変更しています。

その他はサンプル用の配色設定となります。

JavaScriptでKeen-Sliderを設定する

Keen-Sliderの機能を有効にするためのJavaScriptを記述します。

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        function AutoSwitchSlidePlugin() {
          return (slider) => {
            let timeoutID;
            function setSwitchSlideTimer() {
              clearTimeout(timeoutID);
              timeoutID = setTimeout(() => {
                slider.next();
              }, 4000);
            }

            slider.on("created", setSwitchSlideTimer);
            slider.on("animationEnded", setSwitchSlideTimer);
            slider.on("updated", setSwitchSlideTimer);
          };
        }

        function ThumbnailLinkedPlugin(mainSlider) {
          return (slider) => {
            function removeCurrentSlideStatus() {
              slider.slides.forEach((slide) => {
                slide.classList.remove("active");
              });
            }

            function addCurrentSlideStatus(idx) {
              slider.slides[idx].classList.add("active");
            }

            function addSwitchSlidesEvent() {
              slider.slides.forEach((slide, idx) => {
                slide.addEventListener("click", () => {
                  mainSlider.moveToIdx(idx);
                });
              });
            }

            slider.on("created", () => {
              addCurrentSlideStatus(slider.track.details.rel);
              addSwitchSlidesEvent();
              mainSlider.on("animationStarted", (mainSlider) => {
                removeCurrentSlideStatus();
                let nextSlide = mainSlider.animator.targetIdx || 0;
                addCurrentSlideStatus(mainSlider.track.absToRel(nextSlide));
                slider.moveToIdx(Math.min(slider.track.details.maxIdx, nextSlide));
              });
            });
          };
        }

        let mainSlider = new KeenSlider(
          ".main",
          {
            loop: true,
          },
          [AutoSwitchSlidePlugin()]
        );

        let thumbnailSlider = new KeenSlider(
          ".thumbnail",
          {
            initial: 0,
            slides: {
              perView: 6,
            },
          },
          [ThumbnailLinkedPlugin(mainSlider)]
        );
      });
    </script>

AutoSwitchSlidePlugin()でメインのスライドを4秒ごとに切り替える設定をしています。

ThumbnailLinkedPlugin()では2つの設定をしています。

  • 現在のメインスライドに連動してアクティブにするサムネイルスライドを切り替える
  • クリックされたサムネイルスライドに連動してメインスライドを切り替える

Keen-Slider以外でサムネイル付きスライドを表示する方法

JavaScriptには他にもスライダーライブラリがあります。

Keen-Slider以外でサムネイル付きスライドを表示する方法もご紹介しています。

サムネイル付きスライドのWEBサイト制作事例

今回のようなサムネイル付きスライドを表示したWEBサイトの制作事例をご紹介します。

まとめ

今回はJavaScriptのスライダーライブラリ「Keen-Slider」を使って、自動で切り替わるサムネイル付きスライドをWEBサイトに表示する方法をご紹介しました。

プラグインオプションを活用することで、複雑な設定なしでメインスライドとサムネイルを連動させることができます。

WEBサイトに動きのある要素を取り入れたい方は、ぜひこの方法を試してみてください。

WEBサイトの制作や保守についてお困りのことがあれば、お気軽にご相談ください。

キーワード

Keywords

タグ

Tag

カテゴリー

Category

他の記事

Other Articles

すべての記事を見る