こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、Image CarouselアプリをJavaScriptで実装したいと思います。「Image Carousel」を日本語訳に直すと「画像のメリーゴーランド」です。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS
ページ(HTML)の作成
最初にページを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Image Carousel</title> </head> <body> <div class="carousel"> <div class="image-container" id="imgs"> <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80" alt="first-image" /> <img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="second-image" /> <img src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="third-image" /> <img src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80" alt="fourth-image" /> </div> <div class="buttons-container"> <button id="left" class="btn">Prev</button> <button id="right" class="btn">Next</button> </div> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾
次にスタイルを記述しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } img { width: 500px; height: 500px; object-fit: cover; } .carousel { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); height: 530px; width: 500px; overflow: hidden; } .image-container { display: flex; transform: translateX(0); transition: transform 0.5s ease-in-out; } .buttons-container { display: flex; justify-content: space-between; } .btn { background-color: rebeccapurple; color: #fff; border: none; padding: 0.5rem; cursor: pointer; width: 49.5%; } .btn:hover { opacity: 0.9; } .btn:focus { outline: none; } |
ここまで実装すると以下のようになります。

JavaScriptの実装
準備ができたので、JavaScriptを実装していきましょう。
要素を取得する
最初に画面操作に必要な要素を取得します。
1 2 3 4 5 |
// 要素を取得する const imgs = document.getElementById('imgs') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') const img = document.querySelectorAll('#imgs img') |
画像回転処理の下地
画像回転処理の下地を作ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 画像のインデックスを初期値 let idx = 0 // run関数を2秒間隔で実行 let interval = setInterval(run, 2000) function run() { // インデックスを切り替えることで画像を切り替える idx++ // 画像切り替え changeImage() } |
画像は全部で4枚あり、それぞれにインデックスをつけて管理します。
setIntervalは、一定間隔で指定した関数(ここではrun)を実行してくれる便利メソッドです。
changeImage関数は、これから実装します。
画像切り替え処理
次は、画像切り替え処理を作成します。
画像の大きさは、500pxで統一しています。そして、画像を納めるコンテナにはtranslateX関数が設定されています。
1 2 3 4 5 6 7 8 9 10 |
img { width: 500px; height: 500px; object-fit: cover; } .image-container { display: flex; transform: translateX(0); transition: transform 0.5s ease-in-out; } |
translateXは、要素を水平方向に動かす関数で、画像の大きさ(-500px)区切りで、水平方向に動かすことが可能になります。
ちなみに「transition: transform 0.5s ease-in-out;」をつけるとスライドアクションがとても滑らかになります。
前提知識はここまでにして、画像切り替え処理を実装しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function changeImage() { // インデックスがイメージの最大数を超えていないか // インデックスと配列は0から始まるので-1する if(idx > img.length - 1) { // 初期化 idx = 0 // インデックスがマイナスになった場合 } else if(idx < 0) { idx = img.length -1 } // translateXを設定 imgs.style.transform = `translateX(${-idx * 500}px)` } |
translateXには、マイナス値を設定してます。ここまでで、以下のように画像が切り替わります。
Next/Prevボタンの処理
Next/Prevボタンが押されたら、画像が切り替わるように実装します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// setIntervalをクリアする function resetInterval() { clearInterval(interval) interval = setInterval(run, 2000) } // Nextボタン rightBtn.addEventListener('click', () => { idx++ changeImage() resetInterval() }) // Prevボタン leftBtn.addEventListener('click', () => { idx-- changeImage() resetInterval() }) |
resetIntervalは、setIntervalを解除する関数です。これを行わないとsetIntervalが何度も実行されてしまうので、あまりよろしくありません。
Next/Prevボタンには、clickイベントを登録しています。この処理のおかげで、ボタンが押された時にイベントを発火できます。
これで完成です。
おわりに
Image Carouselアプリの処理は、某人気オンラインサイトでもよく見かけますよね。
実装もそれほど難しくはなさそうなので、ぜひチャレンジしてください^^
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// 要素を取得する const imgs = document.getElementById('imgs') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') const img = document.querySelectorAll('#imgs img') // 画像のインデックスを初期値 let idx = 0 // run関数を2秒間隔で実行 let interval = setInterval(run, 2000) function run() { // インデックスを切り替えることで画像を切り替える idx++ // 画像切り替え changeImage() } function changeImage() { // インデックスがイメージの最大数を超えていないか // インデックスと配列は0から始まるので-1する if(idx > img.length - 1) { // 初期化 idx = 0 // インデックスがマイナスになった場合 } else if(idx < 0) { idx = img.length -1 } // translateXを設定 imgs.style.transform = `translateX(${-idx * 500}px)` } // setIntervalをクリアする function resetInterval() { clearInterval(interval) interval = setInterval(run, 2000) } // Nextボタン rightBtn.addEventListener('click', () => { idx++ changeImage() resetInterval() }) // Prevボタン leftBtn.addEventListener('click', () => { idx-- changeImage() resetInterval() }) |
コメントを残す
コメントを投稿するにはログインしてください。