59.スライダーを作ろう ～JavaScriptを使って～
さあ、やってきました。
久しぶりのJavaScript。
JavaScriptって、なんだ？という方はこちら。
ではスライダー作成、やっていきましょう。
スライダーって何？
言葉から予想できるかもしれませんが、
画像を複数枚配置して、時間でスライドさせるアレです。
僕の好きなKFCのサイトも使っています。
参考
どうやって作るのか
作るって言っても、何からしていいかわからない！
ですよね。
今回はゼロスタートではなくて、「ライブラリ」を使っていきます。
ライブラリは簡単に言うと、
「ある機能の実現に必要なコードを書いて、まとめたファイル」
くらいのイメージでいいと思います。
これは先人の素晴らしい方々が作ってくれたものです。
感謝して使い、大いに時短していきましょう。
今回は「Swiper」というライブラリを使います。
JavaScript、CSS、HTML（一部コード)を使います。
Swiperを使う
Swiperを使うには
提供されているCSSとJavaScriptファイルを
自身が作成しているHTMLで読み込む必要があります。
CSSはheadタグ内の自身のstyle.cssの前にlinkタグで、
JavaScriptファイルはbodyの閉じタグの自身のjsファイルの前にscriptタグで
それぞれ読み込みます。
その為に公式サイトからCDNのリンクを取得します。
Swiper公式は以下
HTMLへの記述としては以下のような感じで。
<head>
<link rel="stylesheet" href="swiperのcssのCDNの参照先"/>
<link rel="stylesheet" href="./css/style.css">
</head>
<script src="swiperのJavaScriptのCDNの参照先"></script>
<script src="./js/script.js"></script>
</body>
因みに、CDNとはコンテンツ デリバリー ネットワークの略で、
ファイルを自サーバ上に配置せずともリンクを参照することで使用できる仕組み
くらいのイメージでいいと思います。
なので、フォルダ内にファイルがなくてもswiperが使用できるわけです。
至れり尽くせり。ありがたい。
早速作ってみる。
リンクが正しく設定できたら、
自身のJavaScriptファイル(ここではscript.js)に公式の
Initialize Swiper
に記載されているJavaScriptコードをコピペします。
JavaScriptコードに対応したHTMLも用意されているので、
Add Swiper HTML Layout
に記載されているHTMLをコピーして
自身のHTMLファイルでスライダーを配置したい箇所にコピペします。
HTML内のswiper-slideクラス内に、画像を配置すればスライダーとして表示されるようになります。
<div class="swiper-slide">Slide 1</div>
これでとりあえずは動くものの完成です。
本当に、コピペだけで作れる・・・
細かい調整はCSSとJavaScriptで
クラスに対してデザインを指定したり、
JavaScript内の記述を変更するだけで、
思い通りの形に変更することも可能です。
公式サイトのAPIのページからいろいろな設定について知ることができます。
今日のまとめ
- ライブラリを使うことでスライダーはサクッと作れる
- こだわらなければ本当に一瞬
- デザインを適用したい場合は従来通りCSSで
- 動きを変更したい場合は公式のAPIを見ながらJavaScriptで
～～～系ライブラリで自分の扱いやすいものを１つ持つ
というのが、オススメだそうです。
同じ系統のものを複数使えるより、違う系統のもので１つずつ得意を持つと
できることの幅が広がるってことだと思います。
Swiperいじりがいがありそうですね。
では、また。
