Bootstrap PR

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をいれてください。
 "画像０",
 "画像１",
 "画像２",
 "画像３",
 "画像４",
 "画像５",
 "画像６",
 "画像７",
 ];

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

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

// 配列の番号を取得する変数を設定します。初期値は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の画像０を格納。
 main1.src=images[count];//[ ]=0
// main2のsrcに配列imagesの画像１を格納。以下同様。
 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に１を足していくが、配列数を超えるタイミングで場合分けをする。
// images.lengthは配列数なので８。配列番号を入れる[]の部分は、0から始まるので、MAXで７となることに注意。
//images.length-1は７なのでcountが７になったらcountを０にする。
    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は６なのでcountが６になったらcountに1を足して７にする。そして、２番目以降の画像はそれぞれ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にする。そして、３番目以降の画像はそれぞれ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にする。そして、４番目の画像は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配列にある画像数より超えた場合は、配列の０番目に戻るようにするため、場合分けをしています。

 

//prevのボタンを押した際に起こるイベントを定義します。
  prev.addEventListener("click",()=>{
//prevを押すごとにcountから１を引いていくが、配列数を超えるタイミングで場合分けをする。
//countが0の場合、countを７にする。そして、２番目以降の画像はそれぞれ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は７なのでcountが７だったら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は６なのでcountが６だったらcountから1引く。そして、４番目の画像は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製作で役立つので、チャレンジしてみてください。

「最近、独学での学習に限界を感じてませんか？」

 

私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！



関連記事