JavaScriptの使い方 slick.js スライダーの使用方法 初心者

Webデザイナー歴1．5年で、やっとJavaScriptに手を出す

Webデザイナーになって、1年を過ぎた頃から、JavaScript使えるようにしないとな〜、と思いつつ、なかなか手が出せませんでした。
ただ漠然と難しそう・・・　という先入観があったからです。

やらないとと思いつつ、のほほんと過ごしていた、そんなある日、試練はやってきました・・・。
業務でJavaScriptを使わざるを得ない状況になったのです。
その試練とは、、、

「バナーをスライダーで表示させる」　というもの。

慣れている人は簡単でしょう。
ですが、初心者には、難しいんですよね。

ということで、どうやって私がスライダーを表示させたのか、その経緯をまとめます。

まず最初に何をしたか

とりあえず、参考サイトを探しまくりました。
検索キーワードは、

• JavaScript初心者
• JavaScript　スライダー
• バナー　切り替わり

分からなかったら調べるのは、まず大事です。

次に何をしたか

検索した結果、どうやら、スライダーを使ったJavaScriptは、下記のサイトがまず重要らしい。ということが分かりました。

この公式サイトは、slick.jsというもので、
「slickはjQueryベースの、スライダーを作成するためのプラグイン」 だそうです。
この説明自体、なんか難しい。
なので簡単に自分の言葉で翻訳してみることにしました。

まず、slickとは、日本語訳で「滑らか、あるいはスムーズにする。」という意味があるみたいです。
ここでちょっと脱線しますが、「slick」の「sl」自体に「滑る」系の意味があるみたいです。
slip（スリップ）、とかもそうですよね。日本語でも、滑らかな表現の副詞を「スルスル」と言いますが、そこから来ているのかもしれない、ということも言われていました。　オモシロイ！

jQueryというのは、JavaScriptを簡単に使えるようにしたもの。らしいです。

なので、「スルスル動くJavaScriptを実装するための、簡単に使える拡張機能」みたいなものが、slick.jsということだろうなと思いました。

slick.jsの使い方

手順は公式のサイトを参考にします。

このスライダーを実装します。

▼下準備として、slick-1.8.1.zipをダウンロードしておきます。

では、やってみましょう！

下図の位置にバナーのスライダーを入れてみます。（良い感じのバナーがなかったので、写真をスライダーにしてみます）

1．htmlを追加します

この部分がスライダーになります。Top_sliderのclass名は任意です。
のちのち出てくるので、これは重要ポイントです！

<div class="Top_slider">
      <div><img src="images/dummy1.png"></div>
      <div><img src="images/dummy1.png"></div>
      <div><img src="images/dummy1.png"></div>
    </div>

今は縦に3つ並んでいる状態です。

2．　/slickフォルダをプロジェクトに移動する

図はダウンロードしたslick-1.8.1.zipの中身です。
「slick」ファルダを任意のthemes以下に配置します。

3．head部分にslick.cssを追加します

私はlink.htmlに下記を記述しました。

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

「// デフォルトのスタイリングを使用する場合は、新しい slick-theme.css を追加してください」
とあるのですが、実装した結果を見て、slick-theme.cssは別に要らないかなと思いました。
なので、下記の2行はlink.htmlに含めるかは任意です。

// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

4．slick.js を 終了タグの前、jQuery の後に追加します

body終了タグの前 に記述することが大事です！

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

このあと、下記も追加します。

$('.single-item').slick();

そしてclass名を変更します。
single-itemから、Top_sliderに変えました。　

5．スクリプトファイルまたはインラインスクリプトタグでスライダーを初期化します

これも、続けて、4の後ろに記述します。
your-classは、Top_sliderに変更します。

<script>
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
</script>

6.完成！

実装してみての感想

何をどこに記述するか、というところに少し躓きました。公式の手順には当たり前の知識なのかもしれないことが、初心者には難しいんだなと。
このコードだったら、どのファイルに記述する、とか、どの順番で記述するか、というのをロジカルに考えられるようにしたいなーと思います。