テック

スライドショーギャラリー（Slideshow Gallery)を自作する方法

2023年1月15日 by single コメントはまだありません

スライドショーギャラリー（Slideshow Gallery)を自作する方法

今回はスライドショーを自作してみました。

なお、スライドショーを自作するにあたり以下のサイトを参考にし、ワタシなりにカスタマイズしています。

Slideshow Gallery

サイト参考版

まず、一番シンプルに参考にしてきたサイトのコードそのまま利用した場合のバージョンになります。

サンプル

1 / 6

2 / 6

3 / 6

4 / 6

5 / 6

6 / 6

❮ ❯

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Slideshow Gallery demo(1)</title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    /* Position the image container (needed to position the left and right arrows) */
    .container {
      position: relative;
    }
    /* Hide the images by default */
    .mySlides {
      display: none;
    }
    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
      cursor: pointer;
    }
    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    /* Container for image text */
    .caption-container {
      text-align: center;
      background-color: #222;
      padding: 2px 16px;
      color: white;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* Six columns side by side */
    .column {
      float: left;
      width: 16.66%;
    }
    /* Add a transparency effect for thumnbail images */
    .demo {
      opacity: 0.6;
    }
    .active,
    .demo:hover {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div style="width:800px;">
    <!-- Container for the image gallery -->
    <div class="container">
      <!-- Full-width images with number text -->
      <div class="mySlides">
        <div class="numbertext">1 / 6</div>
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" style="width:100%">
      </div>
      <div class="mySlides">
        <div class="numbertext">2 / 6</div>
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" style="width:100%">
      </div>
      <div class="mySlides">
        <div class="numbertext">3 / 6</div>
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" style="width:100%">
      </div>
      <div class="mySlides">
        <div class="numbertext">4 / 6</div>
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" style="width:100%">
      </div>
      <div class="mySlides">
        <div class="numbertext">5 / 6</div>
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg" style="width:100%">
      </div>
      <div class="mySlides">
        <div class="numbertext">6 / 6</div>
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC08519.jpg" style="width:100%">
      </div>
      <!-- 次 と 前ボタンs -->
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>

      <!-- キャプションエリア -->
      <div class="caption-container">
        <p id="caption"></p>
      </div>
      <!-- サムネイルエリア-->
      <div class="row">
        <div class="column">
          <img class="demo cursor" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" style="width:100%" onclick="currentSlide(1)" alt="レッサーパンダ">
        </div>
        <div class="column">
          <img class="demo cursor" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" style="width:100%" onclick="currentSlide(2)" alt="カピパラ">
        </div>
        <div class="column">
          <img class="demo cursor" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" style="width:100%" onclick="currentSlide(3)" alt="ペンギン">
        </div>
        <div class="column">
          <img class="demo cursor" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" style="width:100%" onclick="currentSlide(4)" alt="野良猫">
        </div>
        <div class="column">
          <img class="demo cursor" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg" style="width:100%" onclick="currentSlide(5)" alt="ハシビロコウ">
        </div>
        <div class="column">
          <img class="demo cursor" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC08519.jpg" style="width:100%" onclick="currentSlide(6)" alt="キタキツネ">
        </div>
      </div>
    </div> <!-- container -->
  </div>
  <script type="text/javascript">
    let slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }
    // Thumbnail image controls
    function currentSlide(n) {
      showSlides(slideIndex = n);
    }
    function showSlides(n) {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("demo");
      let captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
      captionText.innerHTML = dots[slideIndex-1].alt;
    }
  </script>
</body>
</html>

デモ

デモページ１

実装方法

スタイルシート定義

  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    /* Position the image container (needed to position the left and right arrows) */
    .container {
      position: relative;
    }
    /* Hide the images by default */
    .mySlides {
      display: none;
    }
    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
      cursor: pointer;
    }
    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    /* Container for image text */
    .caption-container {
      text-align: center;
      background-color: #222;
      padding: 2px 16px;
      color: white;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* Six columns side by side */
    .column {
      float: left;
      width: 16.66%;
    }
    /* Add a transparency effect for thumnbail images */
    .demo {
      opacity: 0.6;
    }
    .active,
    .demo:hover {
      opacity: 1;
    }
  </style>

まず、スタイルシートを定義します。

HTMLマークアップ

まず、スライドショーギャラリーの領域を設定し、クラスに「container」

<div class="container">
   ...
</div>

次に、スライドショー用に表示する写真項目を設定します。

<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
    <img src="(画像URI)" style="width:100%">
  </div>
  ...
</div>

項目用のDIV領域にclass『mySlides』を設定し、その中にイメージタグ（img）を設定し、スライドショーに表示させたい写真を定義します。

また、スライドショーの左上に写真の枚数や何番目の画像がされているのかを表示させたい場合に領域を設定し、class『numbertext』を設定して、適時ラベルを設定してください。

次に「次へ」「前へ」ボタンをと、キャプション領域を設定します。

<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
      <img src="(画像URI)" style="width:100%">
  </div>
  ...
  <!-- 次 と 前ボタン -->
  <a class="prev" >&#10094;</a>
  <a class="next" >&#10095;</a>
  <!-- キャプションエリア -->
  <div class="caption-container">
    <p id="caption"></p>
  </div>
  ...
</div>

基本的には、コピー＆ペーストでいいと思います。

最後に、サムネイル画像を設定します。

<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
      <img src="(画像URI)" style="width:100%">
  </div>
  ...
  <!-- 次 と 前ボタン -->
  <a class="prev" >&#10094;</a>
  <a class="next" >&#10095;</a>
  <!-- キャプションエリア -->
  <div class="caption-container">
    <p id="caption"></p>
  </div>
  <!-- サムネイルエリア-->
  <div class="row">
    <div class="column">
      <img class="demo cursor" src="(画像URL)" style="width:100%" onclick="currentSlide(1)" alt="(キャプション)">
    </div>
    ...
  </div>
</div>

まず、サムネイル領域として、classに『row』を設定し、その配下に、設定したいサムネイル数分、class『column』のDIV領域を設定して下さい。

class『column』のDIV領域配下に、サムネイル画像を設定してください。

サムネイル画像の属性『alt』に設定した文字列は、スライドショーで選択されると、キャプション領域に表示される文字列となります。

Javascriptコード追加

<script type="text/javascript">
  let slideIndex = 1;
  showSlides(slideIndex);
  // Next/previous controls
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  // Thumbnail image controls
  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("demo");
    let captionText = document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;
  }
</script>

サムネイルおよびスライド数自動生成してみた

サンプルコードをそのまま利用してもよいのですが、サムネイルをいちいち生成したり、スライド数を各項目ごとに設定していくのは面倒なので自動生成するようにしてみました。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Slideshow Gallery demo(2)</title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    /* Position the image container (needed to position the left and right arrows) */
    .container {
      position: relative;
    }
    /* Hide the images by default */
    .mySlides {
      display: none;
    }
    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
      cursor: pointer;
    }
    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    /* Container for image text */
    .caption-container {
      text-align: center;
      background-color: #222;
      padding: 2px 16px;
      color: white;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* Six columns side by side */
    .column {
      float: left;
      width: 16.66%;
    }
    /* Add a transparency effect for thumnbail images */
    .demo {
      opacity: 0.6;
    }
    .active,
    .demo:hover {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div style="width:50%;">
    <!-- Container for the image gallery -->
    <div class="container mySlidesShow">
      <!-- Full-width images with number text -->
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" style="width:100%" alt="レッサーパンダ" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" style="width:100%" alt="カピパラ" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" style="width:100%" alt="ペンギン" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" style="width:100%" alt="野良猫" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg" style="width:100%" alt="ハシビロコウ" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC08519.jpg" style="width:100%" alt="キタキツネ">
      </div>
      <!-- 次 と 前ボタン -->
      <a class="prev"  >&#10094;</a>
      <a class="next" >&#10095;</a>
      <!-- キャプションエリア -->
      <div class="caption-container">
        <p id="caption"></p>
      </div>
    </div><!-- mySlidesShow -->
  </div>
  <script type="text/javascript">
    var slidesShow = document.querySelector(".mySlidesShow");
    var slides = document.querySelectorAll(".mySlidesShow div img");
    if ( slides != undefined ) {
      var nCount = slides.length;
      if ( nCount > 0 ) {
        var thumbnailRow = document.createElement("div");
        thumbnailRow.className = "row";

        for ( var i=0; i < nCount; i++ ) {
          var imgObj = slides[i];
          var slide = slides[i].parentElement;

          var photoIndex = document.createElement("div");
          photoIndex.className = 'numbertext';
          photoIndex.innerHTML = String(i+1) + " / "  + String(nCount);
          slide.insertBefore(photoIndex,imgObj);

          /* サムネイル作成 */
          var thumbnailCol = document.createElement("div");
          thumbnailCol.className = "column";
          thumbnailCol.style.width = (100/nCount) + '%';  /* サムネイル画像の幅を設定する */

          var thumbnailImg= document.createElement("img");
          thumbnailImg.className = "demo cursor";
          thumbnailImg.src = imgObj.src;
          thumbnailImg.style.width = '100%';
          thumbnailImg.alt = imgObj.alt;
          /* クリック時のイベント設定 */
          setClickEvent(i+1,thumbnailImg);
          thumbnailCol.appendChild(thumbnailImg);
          thumbnailRow.appendChild(thumbnailCol);
        }
        slidesShow.appendChild(thumbnailRow);
      }
    }
    /*５秒ごとスライド切り替え：スライドショー実行 */
    setInterval("plusSlides(1);",5000);

    var btnPrev = document.querySelector(".prev");
    setBtnClickEvent(-1,btnPrev);

    var btnNext = document.querySelector(".next");
    setBtnClickEvent(1,btnNext);

    let slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }
    // Thumbnail image controls
    function currentSlide(n) {
      showSlides(slideIndex = n);
    }
    function showSlides(n) {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("demo");
      let captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
      captionText.innerHTML = dots[slideIndex-1].alt;
    }
    function setClickEvent(idx,thumbnailImg) {
      /* サムネイルクリック時のイベント設定 */
      thumbnailImg.addEventListener( 'click',  function() {
        currentSlide(idx);
      }, false );
    }
    function setBtnClickEvent(increment,btn) {
      if ( btn == undefined ) return;
      /* ボタンクリック時のイベント設定 */
      btn.addEventListener( 'click',  function() {
        plusSlides(increment);
      }, false );
    }
  </script>
</body>
</html>

デモ

デモページ２

実装方法

サムネイルは実装不要になったので、スライド領域だけ生成すればよいです。

<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
      <img src="(画像URI)" style="width:100%" alt="(キャプション)" >
  </div>
  ...
  <!-- 次 と 前ボタン -->
  <a class="prev" >&#10094;</a>
  <a class="next" >&#10095;</a>
  <!-- キャプションエリア -->
  <div class="caption-container">
    <p id="caption"></p>
  </div>
</div>

サムネイル領域は自動生するようにしたので、キャプションを設定する項目がなくなりました。そのため、キャプションはスライド項目のイメージタグ（<img>）の属性『alt』に設定すると、キャプションに設定されます。

スライドショー自動実行

サムネイル領域を自動生成するにあたり、スライドショー自動再生機能を実装しました。

<script type="text/javascript">
  ...
    /*５秒ごとスライド切り替え：スライドショー実行 */
    setInterval("plusSlides(1);",5000);
  ...
</script>

スライドショーギャラリーをライブラリ化してみた

せっかく、自作でサムネイルを自動生成するようにして、コーディングしたので、CSSファイルおよびJSファイルにして、ライブラリ化してみみました。

サンプル

❮ ❯

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Slideshow Gallery demo(3)</title>
  <link rel="stylesheet" href="https://www.single-life.tokyo/demo/MySlideShow.css">
  <style type="text/css">
    .numbertext { 
       font-size: 64px;
    }
  </style>
</head>
<body>
  <div style="width:50%;">
    <!-- Container for the image gallery -->
    <div class="container mySlidesShow">
      <!-- Full-width images with number text -->
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" style="width:100%" alt="レッサーパンダ" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" style="width:100%" alt="カピパラ" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" style="width:100%" alt="ペンギン" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" style="width:100%" alt="野良猫" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg" style="width:100%" alt="ハシビロコウ" />
      </div>
      <div class="mySlides">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC08519.jpg" style="width:100%" alt="キタキツネ">
      </div>
      <!-- 次 と 前ボタン -->
      <a class="prev" >&#10094;</a>
      <a class="next" >&#10095;</a>
      <!-- キャプションエリア -->
      <div class="caption-container">
        <p id="caption"></p>
      </div>
    </div><!-- mySlidesShow -->
  </div>
  <script src="https://www.single-life.tokyo/demo/MySlideShow.js"></script>
   <script type="text/javascript">
    /* interval:スライドの表示時間（ミリ秒） */
    /* slideIndex：初期表示時のスライド番号（1～） */
    var sliddeShow = new MySlideShow(".mySlidesShow",{ interval:4000, slideIndex:3 } );
   </script>
</body>
</html>

CSSファイル（MySlideShow.css）

MySlideShow.css

* {
  box-sizing: border-box;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}
/* Hide the images by default */
.mySlides {
  display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}

JSファイル（MySlideShow.js）

MySlideShow.js

class MySlideShow {
  constructor(selector,options) {
    /* オプション取得 */
    this.selector = selector;
    this.interval = options.interval || 0;
    this.slideIndex = options.slideIndex || 1;
    this.prevSelector = options.prevSelector || '.prev';
    this.nextSelector = options.nextSelector || '.next';
    this.demoClass = options.demoClass || 'demo';
    this.rowClass = options.rowClass || 'row';
    this.columnClass = options.columnClass || 'column';
    this.cursorClass = options.cursorClass || 'cursor';
    this.numbertextClass = options.numbertextClass || 'numbertext';
    this.captionId = options.captionId || 'caption';
    /* 初期化処理実行 */
    this.init();
  }

  /* サムネイルを設定 */
  init() {
    var slidesShow = document.querySelector(this.selector);
    var slides = document.querySelectorAll(this.selector  + " div img");
    if ( slides != undefined ) {
      var nCount = slides.length;

      if ( nCount > 0 ) {
        var thumbnailRow = document.createElement("div");
        thumbnailRow.className = this.rowClass;

        for ( var i=0; i < nCount; i++ ) {
          var imgObj = slides[i];
          var slide = slides[i].parentElement;
          slide.setAttribute("mySlide","true"); /* 属性を設定 */

          var photoIndex = document.createElement("div");
          photoIndex.className = this.numbertextClass;
          photoIndex.innerHTML = String(i+1) + " / "  + String(nCount);
          slide.insertBefore(photoIndex,imgObj);

          /* サムネイル作成 */
          var thumbnailCol = document.createElement("div");
          thumbnailCol.className = "column";
          thumbnailCol.style.width = (100/nCount) + '%';  /* サムネイル画像の幅を設定する */

          var thumbnailImg= document.createElement("img");
          thumbnailImg.className = this.demoClass + " " + this.cursorClass;
          thumbnailImg.src = imgObj.src;
          thumbnailImg.style.width = '100%';
          thumbnailImg.alt = imgObj.alt;
          /* クリック時のイベント設定 */
          this.setClickEvent(i+1,thumbnailImg);
          thumbnailCol.appendChild(thumbnailImg);
          thumbnailRow.appendChild(thumbnailCol);
        }
        slidesShow.appendChild(thumbnailRow);
      }
    }
    if ( this.interval > 0 ) {
      /* スライドショー実行 */
      setInterval(() => {
        this.plusSlides(1);
      }, this.interval);
    }
    var btnPrev = document.querySelector(this.prevSelector);
    this.setBtnClickEvent(-1,btnPrev);
    var btnNext = document.querySelector(this.nextSelector);
    this.setBtnClickEvent(1,btnNext);
    this.showSlides(this.slideIndex);
  }
  plusSlides(n) {
    this.showSlides(this.slideIndex += n);
  }
  // Thumbnail image controls
   currentSlide(n) {
    this.showSlides(this.slideIndex = n);
  }
   showSlides(n) {
    let i;
    let slides = document.querySelectorAll(this.selector + " div[mySlide='true']");
    let dots = document.getElementsByClassName(this.demoClass);
    let captionText = document.getElementById(this.captionId);
    if (n > slides.length) {this.slideIndex = 1}
    if (n < 1) {this.slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[this.slideIndex-1].style.display = "block";
    dots[this.slideIndex-1].className += " active";
    captionText.innerHTML = dots[this.slideIndex-1].alt;
  }
  setClickEvent(idx,thumbnailImg) {
    /* サムネイルクリック時のイベント設定 */
    thumbnailImg.addEventListener( 'click',  function() {
      this.currentSlide(idx);
    }.bind(this), false );
  }
  setBtnClickEvent(increment,btn) {
    if ( btn == undefined ) return;
    /* ボタンクリック時のイベント設定 */
    btn.addEventListener( 'click',  function() {
      this.plusSlides(increment);
    }.bind(this), false );
  }
}

デモ

デモページ３

実装方法

MySlideShow初期化

<script type="text/javascript">
 /* interval:スライドの表示時間（ミリ秒） */
 /* slideIndex：初期表示時のスライド番号（1～） */
 var sliddeShow = new MySlideShow(".mySlidesShow",{ interval:4000, slideIndex:3 } );
</script>

MySlideShowクラスというのを作成しました。

初期化パラメータの第１パラメータに、スライドショー領域のセレクタ文字列、第２パラメータにオプションを指定できるようにしました。

以上、ご参考まで

Comments are closed.

スライドショーギャラリー（Slideshow Gallery)を自作する方法

スライドショーギャラリー（Slideshow Gallery)を自作する方法

サイト参考版

サンプル

HTMLコード

デモ

実装方法

スタイルシート定義

HTMLマークアップ

Javascriptコード追加

サムネイルおよびスライド数自動生成してみた

HTMLコード

デモ

実装方法

スライドショー自動実行

スライドショーギャラリーをライブラリ化してみた

サンプル

HTMLコード

CSSファイル（MySlideShow.css）

JSファイル（MySlideShow.js）

デモ

実装方法

MySlideShow初期化

Related Posts

広告

アーカイブ

カテゴリー

Recent Posts

SPYD運用報告（2024年3月）

HDV運用報告（2024年3月）

家計簿公開（2024年2月）

ゴールドファンド（金の投資信託）運用報告(2024年3月)

2024年3月の投資状況公開