カルーセルの作り方

2021-12-09

JavaScriptでWEBサイトでよく見る横に画像などをスライドさせるカルーセルの作り方

・今回からはJavaScriptを使ってのカルーセルの作り方について解説していきたいと思います。

・カルーセルとはWEBページなどで見られる横に画像がスライドさせることができるシステムのことで矢印を押したり、下に作った丸印を押すことで画像を選択できたりする機能です。

・WEBページだとヘッダー画像やおすすめの記事などを配置したいときに使いやすいUIにしたいときや場所をあまり取りたくない時、画像を大きく載せたいときなどに使うのでかなり汎用性があるかと思います。

・こんな感じのUIがカルーセルです。

・今回もChromeとVS Codeを使ってコードを書いていきます。

・ChromeとVS Codeがわからないという方はこちらの記事もご確認ください。

・ではファイルを作っていきます。

・いつもと同様HTMLをマークアップしていきCSSでデザインを整えてJavaScriptで動きをつけていきます。

・まずはHTMLからですね。VS codeでファイルを開きindex.htmlのファイルを作っていきましょう。

・いつもと同様にVS Codeでファイル作成をしていきます。VS Codeを開いたら新規フォルダを押してフォルダを作成します。名前はcarouselとしておきましょう。

・開くと押すとプロジェクトフォルダが作成されるのでこの中にHTMLのファイルを作っていきます。

・ファイル作成のアイコンをクリックしてファイル名をindex.htmlと書いていきます。これは書式が決まっているので必ずindex.htmlと名前を付けるようにしてください。エンターを押すとファイルができるのでその中にHTMLを書いていきましょう。

・次にファイルの中身を書いていく前にスライドショーで使う画像を読み込んでおきましょう。

・使いたい画像ファイルを選びます。この時注意点としては自分で写真を取る場合は被写体に許可を取ることとネットで画像を探す場合は商用利用可のものを選んでください。

・著作権の問題は厳しいので詳しく調べてから画像を使うようにしましょう。

・画像を選んだら先程作ったファイルを開いて先程作ったindex.htmlと同じ階層に新しくフォルダを作っておきましょう。わかりやすいように名前をimgとつけておくといいです。

・そしたらそのimgのフォルダの中に先に選んでおいた画像をいれていきます。

・これでファイル名を入れるとその画像をHTMLが読み込んでくれるようになります。

・詳しくはこちらの記事を確認してください。