Tiny Slider2で自動で切り替わるサムネイル付きスライドを実装する方法

how-to-implement-thumbnail-slides-with-tiny-slider2

Tiny Slider2で自動で切り替わるサムネイル付きスライドを実装する方法

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

ITサポート・
WEBサイト制作は
お任せください

パソコンの動作が遅い
IT・DXツールを導入したい
WEBサイトを作りたい
WEBサイトの表示がおかしくなった

ご相談はこちらから

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

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

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

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

必要なコード(全体)

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

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css"
    />

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

      .thumbnail {
        height: 100px;
      }

      .main div,
      .thumbnail div {
        height: 100%;
      }

      .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 div {
        opacity: 0.5;
      }

      .thumbnail .tns-nav-active {
        opacity: 1;
      }

      #tns1-ow button[data-action] {
        font-size: 11px;
        background: transparent;
        border: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

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

      <div class="thumbnail">
        <div class="slide1">スライド1</div>
        <div class="slide2">スライド2</div>
        <div class="slide3">スライド3</div>
        <div class="slide4">スライド4</div>
        <div class="slide5">スライド5</div>
        <div class="slide6">スライド6</div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let main = tns({
          container: ".main",
          items: 1,
          autoplay: true,
          autoplayTimeout: 4000,
          autoplayText: ["[ 再生 ]", "[ 停止 ]"],
          controls: false,
          navContainer: ".thumbnail",
        });

        let thumbnail = tns({
          container: ".thumbnail",
          items: 6,
        });
      });
    </script>
  </body>
</html>

各コードの解説

Tiny Slider2を読み込む

CDNを利用してTiny Slider2を読み込みます。

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css"
    />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

スライドのHTMLを構築する

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

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

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

      <div class="thumbnail">
        <div class="slide1">スライド1</div>
        <div class="slide2">スライド2</div>
        <div class="slide3">スライド3</div>
        <div class="slide4">スライド4</div>
        <div class="slide5">スライド5</div>
        <div class="slide6">スライド6</div>
      </div>
    </div>

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

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

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

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

      .thumbnail {
        height: 100px;
      }

      .main div,
      .thumbnail div {
        height: 100%;
      }

      .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 div {
        opacity: 0.5;
      }

      .thumbnail .tns-nav-active {
        opacity: 1;
      }

      #tns1-ow button[data-action] {
        font-size: 11px;
        background: transparent;
        border: 0;
      }
    </style>

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

Tiny Slider2では自動再生を設定したスライドに再生・停止ボタンが表示されるので、そのスタイルも設定しています。

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

JavaScriptでTiny Slider2を設定する

Tiny Slider2の機能を有効にするためのJavaScriptを記述します。

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let main = tns({
          container: ".main",
          items: 1,
          autoplay: true,
          autoplayTimeout: 4000,
          autoplayText: ["[ 再生 ]", "[ 停止 ]"],
          controls: false,
          navContainer: ".thumbnail",
        });

        let thumbnail = tns({
          container: ".thumbnail",
          items: 6,
        });
      });
    </script>

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

スライドの再生ボタンのテキストは日本語として、navContainerオプションでサムネイルスライドを指定しています。

thumbnailではサムネイルスライドを6枚表示で設定しています。