こんにちは、yutaです。
ホームページなどで写真がスライドして表示されているのを見たことがあると思います。
実は、slickという無料のJQueryを使用すれば、簡単にスライダーを設置することができます。
slick本体のダウンロードは、slick公式サイトのメニュー”get it now”をクリックすると出てくる、”Download Now”をクリックすればOKです。
基本的には、slick公式サイトの”usage”に書いてある手順でコーディングすればスライダーを設置できます。
僕もwebサイト製作中にslickでスライダーを設置したんですが、最初少し苦戦したので備忘録として書き留めておきます。
また、slickの使い方を紹介しているサイトは複数ありますが、全てのソースコードを掲載しておらず、結局どう書けば動くのか分からないサイトが多かったので、ここでは完全に全コード(html, css全て)を掲載します。
全部コピペすれば同じスライダーが作れる記事にします！(画像は準備してもらう必要があります。笑)
htmlの中身
slickでスライダーを動かすために、htmlファイルとcssファイルを1つずつ作成しました。早速、htmlの中身を公開します！
cssの中身
次はcssファイルの中身を公開します！
と言っても、cssではスライダーのサイズと配置、そして表示する画像のサイズを指定しているだけですけどね。笑
動くコードを書くコツ
1.各ファイルを正しい位置に置く
slickのjavascriptファイルや、htmlファイル、cssファイル、画像ファイルなどがソースコードに記述したパスと合っていなければ当然スライダーは動きませんので、ファイルの位置には気をつけてください。
今回僕がスライダーを作成した時のファイルの配置は以下の通りです。
2.<head></head>内にはcssだけ記述
僕はjavascriptファイルの参照などをheadタグ内に記述していたんですが、それだとスライダーが上手く設置できなかったので、headタグ内にはcss参照のみを記述しました。(そうしないと、たとえスライダーが表示されても、スライダーのサイズなど細かい設定が反映されなくなります。)
3.css以外は</body>の直前に記述
css参照の記述以外は、</body>の直前に、JQuery > slickのjavascript > スライダーの初期化設定の順番で記述してください。
4.htmlのcharsetを”UTF-8″にする
font-familyを設定していると、charset=”UTF-8″が無くても問題なかったりするようですが、何も設定していない場合は、スライダーの両端の矢印が文字化けor表示されません。
以上、slickの使い方というか、実際のコードと、コーディングする上でのコツの解説でした！では、また。
