時間経過で画像が切り替わっていくスライドショーや、画像をクリックしたときに、ページ遷移なしで拡大画像をポップアップで表示するなど、動きのあるホームページが当たり前になっています。
これらはJavaScriptによって実装されているので、自分のホームページでも使いたいと思うと、専門の知識や技術が必要になります。
じゃあ、JavaScriptを修めた人しか使えないのか、というと、そのようなことはありません。「ライブラリ」と呼ばれる、有志の人が公開してくれているJavaScriptのプログラムを活用することで、手軽に実装可能です。
ここでは、スライドショーのためのライブラリ『Swiper』、画像ポップアップのためのライブラリ『Zooming』、二つを紹介いたします。
人の書き方を見ることで学べることもたくさんあります！ライブラリを使いながら、JavaScriptの知識を深めていきましょう！
目次
スライドショーを実装するライブラリ『Swiper』
ホームページにスライドショーを実装するなら『Swiper』がおすすめです！ JavaScriptでスライドショーを実装しようとすると、後述の『jQuery』を併用するライブラリが多いのですが、Swiperは単体で動くため、無駄な読み込みがありません。さらにレスポンシブに対応していて、動作感が軽量な点も特徴的です。 スライドショーとは、表示する画像やテキストを切り替えながら順番に表示していくもので、横、もしくは縦にスライドさせたり、クロスフェードさせたりする表現です。同じような意味で「スライダー」、「カルーセル」という言葉も使われます。 ホームページのトップで使用されることが多く、個人サイト、企業サイト問わず、幅広く使用されています。Swiperの実装・使い方
1. 公式サイトを開く
Googleで『Swiper』と検索し、『Swiper - Most Modern Mobile Touch Slider…』というタイトルのページを開く。 ※次のリンクからでも可: http://idangero.us/swiper/
2. DownloadボタンをクリックしてSwiperのファイルをダウンロードする
例：Firefoxのダウンロード画面
3. ダウンロードしたzipファイルを解凍(展開)し、本体のjsファイルとcssファイルをコピーする
- Swiper-3.4.2 > dist > js フォルダの中に入っている、「swiper.min.js」
- Swiper-3.4.2 > dist > css フォルダの中に入っている、「swiper.min.css」
4. Swiperを組み込みたいページにjs、cssを読み込む
例：画像が並んだページにSwiperを読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Swiper</title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./swiper.min.js"></script>
</head>
<body>
<div>
<ul>
<li>
<img src="./img/sample1.jpg" alt="Swiper実行デモ画像1">
</li>
<li>
<img src="./img/sample2.jpg" alt="Swiper実行デモ画像2">
</li>
<li>
<img src="./img/sample3.jpg" alt="Swiper実行デモ画像3">
</li>
</ul>
</div>
</body>
</html>
4. ルールに基づいてclassを設定する
例では以下のように設定しています。- Swiperを適用したいブロック：.swiper-container
- スライドさせたい要素をまとめた要素：.swiper-wrapper
- スライドさせたい要素：.swiper-slide
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Swiper</title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="./img/sample1.jpg" alt="Swiper実行デモ画像1">
</li>
<li class="swiper-slide">
<img src="./img/sample2.jpg" alt="Swiper実行デモ画像2">
</li>
<li class="swiper-slide">
<img src="./img/sample3.jpg" alt="Swiper実行デモ画像3">
</li>
</ul>
</div>
</body>
</html>
5.HTMLにSwiperを起動させるスクリプトを追加する。
Swiperを起動させるための次のようなスクリプトを追加してください。
<script>
new Swiper([Swiperを適用したいブロック],[オプション（省略可）]);
</script>
{
オプションの名称1:オプションの値1,
オプションの名称2:オプションの値2,
・
・
・
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Swiper</title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="./img/sample1.jpg" alt="Swiper実行デモ画像1">
</li>
<li class="swiper-slide">
<img src="./img/sample2.jpg" alt="Swiper実行デモ画像2">
</li>
<li class="swiper-slide">
<img src="./img/sample3.jpg" alt="Swiper実行デモ画像3">
</li>
</ul>
</div>
<script>
!function(){
new Swiper('.swiper-container');
}();
</script>
</body>
</html>
6.補足情報
よく使うオプションの設定を一部抜粋してご紹介いたします。画像が切り替わる速度は2秒にしています。 【自動でスライドさせる】 DEMOページ：https://xn--web-oi9du9bc8tgu2a.com/demos/library-javascript/sample-swiper/demo2.html
{'autoplay':2000, 'loop':true}
{'effect':'fade', 'autoplay':2000, 'loop':true}
- autoplay
- 何秒ごとに画像を切り替えるか設定します。オプションにこのパラメーターが含まれていると、読み込まれたらスライドが始まるようになります。ms(ミリ秒)で設定します。例は2000なので、2000/1000で2秒ということになります。
- loop
- スライドを繰り返し再生するかどうかの設定です。trueなら繰り返すようになります。
- effect
- 画像の切り替わり方を変更します。'fade'を指定すると画像が徐々に変わっていくようになります。
画像のポップアップを実装するライブラリ『Zooming』
画像をクリックした際に、ページ移動などをせず、拡大版の表示をさせる表現です。通販サイトなどでよく使用されています。LightBox（ライトボックス）という名前のライブラリで一躍有名になり、派生版がいくつも出ています。 この記事で紹介するZoomingも派生版ですが、手軽に使えるので本家ではなくこちらをご紹介いたします。Zoomingの実装・使い方
1.公式からZoomingのファイルをダウンロードする。
類似のライブラリが多く、検索エンジンではなかなかヒットしないので次のリンクをご参照ください。 URL：http://desmonding.me/zooming/
- 『Clone or download』をクリック。
- 『Download ZIP』をクリック
2. ダウンロードしたzipファイルを解凍(展開)し、本体のjsファイルをコピーする
※build フォルダの中に入っている、『zooming.js』もしくは『zooming.min.js』というファイルです。
3. htmlファイルにscriptタグを追加し、先ほどコピーしたjsファイルを読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Zooming</title>
<script src="./zooming.min.js"></script>
</head>
<body>
<div>
<ul>
<li>
<img src="./img/sample1.jpg" alt="Zooming実行デモ画像1">
</li>
<li>
<img src="./img/sample2.jpg" alt="Zooming実行デモ画像2">
</li>
<li>
<img src="./img/sample3.jpg" alt="Zooming実行デモ画像3">
</li>
</ul>
</div>
</body>
</html>
4. ルールに基づいてポップアップさせたいimg要素に属性を追加する。
jsファイルを読み込み、img要素にdata-action=”zoom”を指定します。 画像が並んだページに追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Zooming</title>
<script src="./zooming.min.js"></script>
</head>
<body>
<div>
<ul>
<li>
<img src="./img/sample1.jpg" alt="Zooming実行デモ画像1" data-action=”zoom”>
</li>
<li>
<img src="./img/sample2.jpg" alt="Zooming実行デモ画像2" data-action=”zoom”>
</li>
<li>
<img src="./img/sample3.jpg" alt="Zooming実行デモ画像3" data-action=”zoom”>
</li>
</ul>
</div>
</body>
</html>
