JavaScriptでImage Carouselアプリを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、Image CarouselアプリをJavaScriptで実装したいと思います。「Image Carousel」を日本語訳に直すと「画像のメリーゴーランド」です。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

準備ができたので、JavaScriptを実装していきましょう。

要素を取得する

最初に画面操作に必要な要素を取得します。

画像回転処理の下地

画像回転処理の下地を作ります。

画像は全部で4枚あり、それぞれにインデックスをつけて管理します。

setIntervalは、一定間隔で指定した関数(ここではrun)を実行してくれる便利メソッドです。

changeImage関数は、これから実装します。

画像切り替え処理

次は、画像切り替え処理を作成します。

画像の大きさは、500pxで統一しています。そして、画像を納めるコンテナにはtranslateX関数が設定されています。

translateXは、要素を水平方向に動かす関数で、画像の大きさ(-500px)区切りで、水平方向に動かすことが可能になります。

ちなみに「transition: transform 0.5s ease-in-out;」をつけるとスライドアクションがとても滑らかになります。

前提知識はここまでにして、画像切り替え処理を実装しましょう。

translateXには、マイナス値を設定してます。ここまでで、以下のように画像が切り替わります。

Next/Prevボタンの処理

Next/Prevボタンが押されたら、画像が切り替わるように実装します。

resetIntervalは、setIntervalを解除する関数です。これを行わないとsetIntervalが何度も実行されてしまうので、あまりよろしくありません。

Next/Prevボタンには、clickイベントを登録しています。この処理のおかげで、ボタンが押された時にイベントを発火できます。

これで完成です。

おわりに

Image Carouselアプリの処理は、某人気オンラインサイトでもよく見かけますよね。

実装もそれほど難しくはなさそうなので、ぜひチャレンジしてください^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す