Bootstrap

JavaScriptでカルーセルの複数画像表示するコードを解説します。

この記事では、カルーセルで複数の画像を表示するコードを解説します。

完成イメージは下記の動画です。

Bootstrapのカルーセルは超便利

今回は、複数の画像を表示するカルーセルを紹介しますが、

1枚の画像を表示するカルーセルが必要な場合は、コードをサイトからコピーしてしまうだけで手間なく綺麗なカルーセルを使用できますので、Bootstrapのカルーセルを使うことをおすすめします。

※Bootstrapを使って複数の画像を表示するカルーセルは、コードを修正する必要があり、少し複雑なので、今回はBootstrapを使わない方法を紹介します。

 

【動画あり】Bootstrap5(ブートストラップ)の設定方法Bootstrap(ブートストラップ)は、フロントエンドの便利なライブラリで多くのWebサイトで利用されております。 非常に使いや...

 

カルーセルで複数の画像を表示するコードの紹介

まずは、全体のコードを紹介。

index.htmlは、最低限のコードです。

「images」クラスの中に画像を表示させます。※今回は4つの画像を表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>slide</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <div class="images">
      <img id="main1" class="main">
      <img id="main2" class="main">
      <img id="main3" class="main">
      <img id="main4" class="main">
  </div>

    <nav>
      <ul>
        <li id="prev">&lt;</li>
        <li id="next">&gt;</li>
      </ul>
    </nav>
  </main>

<script src="main.js"></script>
</body>
</html>

 

styles.cssも最低限のデザインです。必要に応じて修正してください。

main{
  width: 600px;
  margin: 0 auto;
}

img{
  vertical-align: bottom;
  width: 10%;
}

.images{
  display: flex;
}

.main{
  width: 150px;
  margin-bottom: 8px;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

nav{
  margin-bottom: 8px;
}

nav ul{
  display:flex;
  justify-content: space-between;
}

nav li{
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
nav li:hover{
  background-color: #f8f8f8;
}


#play{
width: 140px;
}

#prev,#next{
  width: 60px;
}

.thumbnails{
  display: grid;
  grid-template-columns: repeat(5,56px);
  gap: 5px;
}

.thumbnails li{
  cursor: pointer;
  opacity: 0.4;
}

.thumbnails li:hover,
.thumbnails li.current{
  opacity: 1.0;
}

.thumbnails img{
  width: 56px;
}


 

そしてJavaScriptのコードです。


 const images=[
 "img/image00",
 "img/image01",
 "img/image02",
 "img/image03",
 "img/image04",
 "img/image05",
 "img/image06",
 "img/image07",
 ];


 let count=0;


 const main1=document.getElementById("main1");
 const main2=document.getElementById("main2");
 const main3=document.getElementById("main3");
 const main4=document.getElementById("main4");
 const prev=document.getElementById("prev");
 const next=document.getElementById("next");


 main1.src=images[count];
 main2.src=images[count+1];
 main3.src=images[count+2];
 main4.src=images[count+3];

  


  next.addEventListener("click",()=>{

    if(count===images.length-1){
      count=0;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[count+2];
      main4.src=images[count+3];
    }else if(count===images.length-2){
      count++;
      main1.src=images[count];
      main2.src=images[0];
      main3.src=images[1];
      main4.src=images[2];
    }else if(count===images.length-3){
      count++;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[0];
      main4.src=images[1];
    }else if(count===images.length-4){
      count++;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[count+2];
      main4.src=images[0];
    }else{
      count++;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[count+2];
      main4.src=images[count+3];
    }

  });


  prev.addEventListener("click",()=>{
    if(count < 1){
      count=images.length-1;
      main1.src=images[count];
      main2.src=images[0];
      main3.src=images[1];
      main4.src=images[2];
    }else if(count===images.length-1){
      count--;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[0];
      main4.src=images[1];
    }else if(count===images.length-2){
      count--;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[count+2];
      main4.src=images[0];
    }else{
      count--;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[count+2];
      main4.src=images[count+3];
    }
  });



  window.addEventListener("load",()=>{
    timer();
  })


  function timer(){
    setTimeout(()=>{
      next.click();
      timer();
    },2000)
  }


 

カルーセルの複数画像表示するJavaScriptのコードを解説

ここでは、上記で示したJavaScriptのコードを一行ごと解説していきます。

// カルーセルで利用する画像を配列(images)に格納します
 const images=[
// ”画像〇”の部分に画像のURLをいれてください。
 "画像0",
 "画像1",
 "画像2",
 "画像3",
 "画像4",
 "画像5",
 "画像6",
 "画像7",
 ];

まず、上記では、カルーセルで表示する画像を配列に格納します。今回の例では配列の4つまでが初期で表示されますので、初期で表示した画像を4つまで格納します。

「画像0」の部分には、画像が格納されているURLを記載します。

// 配列の番号を取得する変数を設定します。初期値は0番目の配列を取得するため0。
 let count=0;

 // index.htmlの画像を格納するidを取得し、固定値に代入。
 // document.getElementById("〇〇")はidを取得する決まり文句。
 const main1=document.getElementById("main1");
 const main2=document.getElementById("main2");
 const main3=document.getElementById("main3");
 const main4=document.getElementById("main4");
 //前後の画像に進むボタンのidを取得し、固定値に代入。
 const prev=document.getElementById("prev");
 const next=document.getElementById("next" 

ここでは、変数と定数を定義します。
<
<countは、配列の何番目の要素を呼び出すかを指定する数字を格納する変数です。
document.getElementById(“〇〇”)は、HTMLに記載したidを呼び出す決まり文句です。

// 初期値の画像を格納。
// main1のsrcに配列imagesの画像0を格納。
 main1.src=images[count];//[ ]=0
// main2のsrcに配列imagesの画像1を格納。以下同様。
 main2.src=images[count+1];//[ ]=1
 main3.src=images[count+2];//[ ]=2
 main4.src=images[count+3];//[ ]=3

初期で表示する画像を格納します。

main1.srcは、上記で設定したid(main1)のimgタグにsrcでURLを格納します。

images[count]の部分は、countは初期値で0が格納されているので、images配列の0番目の要素のURLを呼び出しています。

 

//nextのボタンを押した際に起こるイベントを定義します。
  next.addEventListener("click",()=>{
//nextを押すごとにcountに1を足していくが、配列数を超えるタイミングで場合分けをする。
// images.lengthは配列数なので8。配列番号を入れる[]の部分は、0から始まるので、MAXで7となることに注意。
//images.length-1は7なのでcountが7になったらcountを0にする。
    if(count===images.length-1){
      count=0;
      main1.src=images[count];//[ ]=0
      main2.src=images[count+1];//[ ]=1
      main3.src=images[count+2];//[ ]=2
      main4.src=images[count+3];//[ ]=3
//images.length-2は6なのでcountが6になったらcountに1を足して7にする。そして、2番目以降の画像はそれぞれ0~2番目の画像を挿入
    }else if(count===images.length-2){
      count++;
      main1.src=images[count];//[ ]=7
      main2.src=images[0];//[ ]=0
      main3.src=images[1];//[ ]=1
      main4.src=images[2];//[ ]=2
//images.length-3は5なのでcountが5になったらcountに1を足して6にする。そして、3番目以降の画像はそれぞれ0~1番目の画像を挿入
    }else if(count===images.length-3){
      count++;
      main1.src=images[count];//[ ]=6
      main2.src=images[count+1];//[ ]=7
      main3.src=images[0];//[ ]=0
      main4.src=images[1];//[ ]=1
//images.length-4は4なのでcountが4になったらcountに1を足して5にする。そして、4番目の画像は0番目の画像を挿入
    }else if(count===images.length-4){
      count++;
      main1.src=images[count];//[ ]=5
      main2.src=images[count+1];//[ ]=6
      main3.src=images[count+2];//[ ]=7
      main4.src=images[0];//[ ]=0
// 上記以外の場合は、countに1を足して、それぞれの画像に番号にあった画像が挿入される。
    }else{
      count++;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[count+2];
      main4.src=images[count+3];
    }

  });

ここでは、nextボタンをクリックした際のイベントが記載されています。

基本的な流れとしては、nextボタンがクリックされることで、countに1が足され、それぞれの画像が変化する使用ですが、

imagaes配列にある画像数より超えた場合は、配列の0番目に戻るようにするため、場合分けをしています。

 

//prevのボタンを押した際に起こるイベントを定義します。
  prev.addEventListener("click",()=>{
//prevを押すごとにcountから1を引いていくが、配列数を超えるタイミングで場合分けをする。
//countが0の場合、countを7にする。そして、2番目以降の画像はそれぞれ0~2番目の画像を挿入
    if(count < 1){
      count=images.length-1;
      main1.src=images[count];//[ ]=7
      main2.src=images[0];//[ ]=0
      main3.src=images[1];//[ ]=1
      main4.src=images[2];//[ ]=2
//images.length-1は7なのでcountが7だったらcountから1引く。そして、3番目以降の画像はそれぞれ0~1番目の画像を挿入
    }else if(count===images.length-1){
      count--;
      main1.src=images[count];//[ ]=6
      main2.src=images[count+1];//[ ]=7
      main3.src=images[0];//[ ]=0
      main4.src=images[1];//[ ]=1
//images.length-2は6なのでcountが6だったらcountから1引く。そして、4番目の画像は0番目の画像を挿入
    }else if(count===images.length-2){
      count--;
      main1.src=images[count];//[ ]=5
      main2.src=images[count+1];//[ ]=6
      main3.src=images[count+2];//[ ]=7
      main4.src=images[0];//[ ]=0
// 上記以外の場合は、countから1引き、それぞれの画像に番号にあった画像が挿入される。
    }else{
      count--;
      main1.src=images[count];
      main2.src=images[count+1];
      main3.src=images[count+2];
      main4.src=images[count+3];
    }
  });

 

ここでは、nextボタンの時同様、prevをクリックした際のイベントが記載されています。

基本的な流れとしては、prevボタンがクリックされることで、countから1が引かれ、それぞれの画像が変化する使用ですが、

countが0以下になった場合は、imagaes配列にある最後の画像に戻るようにするため、場合分けをしています。

 

//  ページが起動した時に起動するイベント設定
  window.addEventListener("load",()=>{
// timer()関数を呼び出し
    timer();
  })

// 自動でアニメーションが起動する関数を設定
  function timer(){
// setTimeout()で繰り返し
    setTimeout(()=>{
//上記で作成したnextボタンをクリックした時の動きを呼び出し
      next.click();
// 繰り返しを行うため、タイマー関数を呼び出し
      timer();
// 上記の動きを2,000ミリ秒ごとに繰り返す
    },2000)
  }

ここまでは、ボタンをクリックするごとにイベントが起こる使用について説明していきましたが、ここでは、ページを開いた時点から画像が変更していくコードです。

まず、window.addEventListener(“load”,()=>{})では、ページが読み込まれた時に起動するイベントを定義しています。

function timer()では、上記でページが読み込まれた際に起動する関数を記載していて、2,000ミリ秒ごとにnextボタンをクリックしたのと同じことが繰り返されるようにしてあります。

JavaScriptでカルーセルの複数画像表示するコードを解説のまとめ

いかがでしたか?

カルーセルは、Web製作でよく使われるものなので、色々なタイプのカルーセルを作れるとWeb製作で役立つので、チャレンジしてみてください。