Webサイトに動きを加えると、ユーザーの目を引けるため、魅力的なサイトに仕上がります。その中でも、スライドショーは、画像やコンテンツを順番に表示できる便利な機能です。
JavaScriptを使えば、簡単にスライドショーを実装できますが、ゼロから作るのは手間がかかります。本記事では、初心者でも扱いやすいSlickとSwiperという2つのライブラリを紹介し、それぞれの特徴や使い方を解説します。
JavaScriptのスライドショーとは
JavaScriptのスライドショーとは、画像やコンテンツをスライド形式で表示する機能です。
一定の間隔で自動的に画像を切り替えたり、ユーザーが操作して次の画像に進めたりすることができます。
スライドショーを導入することで、Webサイトのデザイン性が向上し、情報を視覚的にわかりやすく伝えることが可能です。
特に、トップページのバナー画像や、ギャラリーページなどで利用されます。
また、JavaScriptでできることについては、以下の記事で詳しく解説しています。JavaScriptを使ってできる開発の具体例についても紹介しているので、ぜひ参考にしてください。
JavaScriptでスライドショーを作れるライブラリ
JavaScriptでスライドショーを作るなら、ライブラリの活用がおすすめです。JavaScriptでスライドショーを作れるおすすめのライブラリは、以下の2つです。
- Slick
- Swiper
これらのライブラリの使い方についてみていきましょう。
ライブラリ①Slick
引用：Slick
Slickは、jQueryをベースに動くライブラリで、初心者でも簡単にスライドショーを実装できるのが特徴です。レスポンシブ対応やナビゲーションボタンの追加など、多くの機能が標準で備わっています。
また、オプションを利用することで、スライドショーにかかる時間や切り替えのスピードを変えたり、表示させる画像の枚数を調整したりもできます。
ライブラリ②Swiper
引用：Swiper
Swiperは、jQueryを使わずに動作するJavaScriptのライブラリです。jQueryを使用しないため、動作が軽くスムーズに起動するのが特徴です。
オプションやデモが充実しているため、Swiperがあれば、ほとんどのデザインのスライドショーを実現できます。
Slickを使ってスライドショーを作る方法
実際に、JavaScriptのライブラリであるSlickを使って、スライドショーを作る手順についてみていきましょう。
手順①jQueryを導入する
SlickはjQueryが必要なライブラリです。jQueryは、ファイルをダウンロードする方法と、CDNを利用する2種類の方法があります。
今回は、CDN経由でjQueryを導入します。まず、jQueryのCDNが掲載されている公式サイトを開き、一番上に表示されている「jQuery 3.x」の「minified」のリンクをクリックしましょう。
続いて、表示されたコードをコピーして、HTMLファイルのheadタグ内にペーストします。
これで、jQueryの導入は完了です。
手順②Slickを導入する
次に、SlickのCSSとJSを読み込みます。jQueryと同じく、ファイルをダウンロードする方法とCDNを利用する方法がありますが、こちらもCDNを使って導入していきます。
まず、Slickの公式サイトにアクセスして、上部メニューから「get it now」のリンクをクリックしましょう。
すると、CSSとJSのCDNが表示されるので、この二つをコピーして、HTMLに貼り付けてください。
このとき、linkタグのhref属性とscriptタグのsrc属性にある「//cdn」の前に「https:」をつけて、「https://cdn～」となるようにしておきましょう。
手順③HTMLを記述する
続いて、スライドショーを表示するためのHTMLを記述します。HTMLは以下の雛形をもとに記述することで、Slickが動作します。
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
今回は、以下のようなHTMLを記述しました。
<div><img src=”img1.jpg”></div>
<div><img src=”img2.jpg”></div>
<div><img src=”img3.jpg”></div>
</div>
class名やタグは自由に変更可能ですが、スライドショーにしたい要素を兄弟で並べ、それを囲む要素を配置するという形は崩さないようにしましょう。
手順④Slickのコードを記述する
最後に、scriptタグ内に、Slickのコードを記述します。サンプルコードはSlickの公式サイトにある「demos」から確認できます。
今回は、以下のサンプルコードを記述しました。
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
});
今回記述した「infinite」「slidesToShow」「slidesToScroll」はSlickのオプションで、それぞれ以下の意味を持ちます。
| オプションと値 | 説明 |
| infinite: true | スライドをループさせ、最後のスライドの後に最初のスライドが続くようにする。falseにすると端で停止する。 |
| slidesToShow: 1 | 一度に表示するスライドの数を指定する。1だと1枚ずつ表示される。 |
| slidesToScroll: 1 | 1回のスクロールで移動するスライドの数を指定する。1だと1枚ずつスライドする。 |
最後にお好みでCSSを整えたら、実際にブラウザを更新してスライドショーが動作しているか確認してみましょう。
スライドショー以外にJavaScriptでできること
JavaScriptでは、スライドショー以外にも、Webサイトに以下のような動きを実装できます。
- ハンバーガーメニューの作成
- ポップアップの作成
- アコーディオンメニューの作成
これらの、スライドショー以外にJavaScriptでできることについてみていきましょう。
できること①ハンバーガーメニューの作成
ハンバーガーメニューとは、スマートフォンのように画面サイズが小さいデバイスのデザインでよく使われる機能です。
三本線のアイコンをタップするとナビゲーションメニューが表示されます。
JavaScriptを使うことで、クリックイベントを検知できるため、メニューを開閉する動きを実装できます。例えば、メニューアイコンがクリックされたときに、要素にクラスを追加してCSSを書き換えることで、見た目の切り替えが可能です。
さらに、アニメーション効果を加えることで、より滑らかな開閉動作を実現できます。レスポンシブデザインのWebサイトでは必須の機能であり、JavaScriptの基礎的な学習にも適した実装例の一つです。
できること②ポップアップの作成
ポップアップは、ユーザーが特定の操作をした際に、画面上にダイアログを表示する仕組みです。例えば、ボタンをクリックしたときに、注意喚起のメッセージを表示させることができます。
実装は、JavaScriptでクリックイベントをトリガーにして、ポップアップ要素のdisplayプロパティを切り替えることで可能です。
また、背景を半透明にしてフォーカスをポップアップに集中させると、より視認性の高いデザインになります。
できること③アコーディオンメニューの作成
アコーディオンメニューは、クリックすると隠れているコンテンツがスライドダウンして表示される機能です。FAQページや、長いコンテンツをコンパクトにまとめたい場合によく使われます。
JavaScriptでは、クリックされた要素の次の要素の領域を変更することで、開閉するアコーディオンメニューを実装できます。また、CSSのトランジションを組み合わせることで、より自然なアニメーションも実現可能です。
こうしたUIをJavaScriptで作れるようになると、Webサイトの操作性やデザイン性を向上させられるでしょう。
JavaScriptのスキルを身につけるには？
JavaScriptのスキルを身につけるなら、以下の方法で学ぶのがおすすめです。
- 基礎をしっかり学ぶ
- 実際に手を動かしてコードを書く
- フレームワークやライブラリを学ぶ
これらの、JavaScriptのスキルを身につける方法についてみていきましょう。
学習方法①基礎をしっかり学ぶ
JavaScriptを学ぶ際は、まず基礎をしっかり理解することが重要です。
変数の使い方やイベント処理、DOM操作といった基本概念を押さえることで、実践的なコードを書けるようになります。
オンラインのチュートリアルや入門書を活用し、基本的なコードを書きながら学ぶのが効果的です。また、公式ドキュメントでは正確な情報を得られるので、学習時は積極的に活用しましょう。
学習方法②実際に手を動かしてコードを書く
プログラミングは、知識だけではなく実際にコードを書いて学ぶことが大切です。基本的な構文を学んだ後は、簡単なプログラムを作成しながら理解を深めましょう。
例えば、ToDoリストや電卓などのシンプルなアプリを作ると、基本的なスキルが身につきます。
JavaScriptのコードはブラウザ上ですぐに実行できるため、試行錯誤しながら学習を進めることが可能です。
学習方法③フレームワークやライブラリを学ぶ
JavaScriptには、便利なフレームワークやライブラリが多数存在します。例えば、ReactやVue.jsを学ぶことで、効率的にWebアプリを開発できるようになります。
また、jQueryを活用すると、JavaScriptのコードをよりシンプルに記述できます。ただし、基礎を理解しないままフレームワークを学ぶと、応用力が身につかないため、まずは純粋なJavaScriptをしっかり学んでから取り組みましょう。
なお、純粋なJavaScriptの使い方については、以下の記事で解説しています。応用的なアニメーションの作り方も紹介しているので、ぜひこちらもあわせてご覧ください。
JavaScriptとスライドショーについてのまとめ
今回は、JavaScriptでスライドショーを作る方法について解説しました。SlickやSwiperといったライブラリを活用すれば、初心者でも簡単にスライドショーを実装できます。
さらに、JavaScriptを学ぶことで、ハンバーガーメニューやポップアップなど、さまざまな動きをWebサイトに加えることも可能です。
スライドショーやさまざまな動きを実装して、JavaScriptのスキルを向上させていきましょう。
