【slick使い方】便利なスライダーslickを始めましょう

プログラミング

こんにちは、のくと申します。

 

先日、slickというjQueryのスライダープラグインが動かないぞと1日ほど画面とにらめっこしていたのですが、それがやっとこさ解決したのでこの記事でその記録をまとめておこうと思います。

 

できてしまえば簡単なのですが、できるまでが非常に長く感じるものです。

今回はそんな、画面とにらめっこせずに済むよう、slickの使い方の説明をさせていただきたいと思います。

 

はじめに断っておくと、この記事は下の記事を参考にした部分が大きいです。

https://www.jungleocean.com/programming/190201jquery-slick

 

slickを使う流れ

では、まずは簡単にslickを表示させるまでの流れを解説します。

 

  1. Slickをダウンロード
  2. HTMLで<head>にslickを読み込むコードを入れる
  3. HTMLでスライドを記述する
  4. HTMLで</body>のすぐ上にJavaScriptを読み込ませる
  5. JavaScriptに関数とプロパティを記述する
  6. CSSなどで微調整

 

この流れでslickを表示させることができるはずです。

 

では詳しく見ていきましょう。

1. Slickをダウンロード

まずは、slickをダウンロードしましょう。

 

CDNを利用してインターネットから直接持ってくることも可能ですが、今回は自分がうまくいった方法のみを紹介させていただくため、ダウンロードする形で進めていきます。

 

slick公式サイト(https://kenwheeler.github.io/slick/)に入り、上のメニューからget it nowを選択します。。

 

画面が遷移するので、download nowを選択します。

 

これで自分のpcにファイルがダウンロードされます。

 

ここでは、話の進行のため、ダウンロードしたフォルダを丸ごと”practice-slick”というフォルダに移動させました。

2.  HTMLで<head>にslickを読み込むコードを入れる

では、HTMLのエディタ(index.html)を作成し、そのheadタグに以下のコードを入れてください。

<link rel="stylesheet" type="text/css" href="./slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick/slick/slick-theme.css"/>

これでslickを読み込むことができます。

これをそのままコピペする場合は、上で説明させていただいたように、index.htmlがある場所と同じ位置にslickという名前のフォルダを置くようにしてください。

 

slickというフォルダは、slickをダウンロードした時に全てのファイルをまとめてあるフォルダです。
ここまで行うと、このような感じになると思います。

3. HTMLでスライドを記述する

では次に、実装するスライドを用意しましょう。

 

やり方としては、<body>の中に、スライドを一枚ずつ<div>で挟み、スライド全体を適当なクラスをつけて囲みます。

<div class="slider">
<div class="slide"><img src="./image/BIBAI2160.jpg" width="800px" alt=""></div>
<div class="slide"><img src="./image/heriyakei419187.jpg" width="800px" alt=""></div>
<div class="slide"><img src="./image/KAZ20181201000.jpg" width="800px" alt=""></div>
</div>

 

画像は、足成というフリーの画像サイトを利用してダウンロードした形です。

画像をまとめて取り込んだフォルダをindex.htmlと同じ階層に置いています。

ここまでくるとこんな感じです。

 

まだslickの記述がないので、画像がただ並んでいるだけになっています。

cssを先に作ってしまっていたため中央揃えになってしまっています。

 

4. HTMLで</body>の真上にJavascriptを読み込ませる

HTMLにコードを書くのはこれで最後です。

JavaScriptのファイルとjQueryのファイルを</body>の真上に読み込ませます。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="./slick/slick/slick.min.js"></script>
<script src="./script2.js"></script>

一行目はjQueryの読み込みです。

二行目はslickのJavaScriptの読み込みだと思います。

三行目は自分で作るJavaScriptの読み込みです。ここではそのファイルをscript2.jsとし、index.htmlと同じ階層に設置しています。

 

HTMLは以下のようになります。

 

まだブラウザに変化はありません。

5. Scriptにslickの関数とプロパティを追加する

HTMLができたので、次はJavaScriptを書いていきましょう。

 

しかし、ここがslickの凄いところです。

関数がとても簡単です。

$(function(){

$('.slider').slick();

});

これを書くだけでスライドになります。

.sliderになっている部分は、自分のHTMLを確認しながら、スライド全体を囲んでいるクラスに設定しましょう。

 

また、以下のようにプロパティを追加することもできます。

$(function(){

$('.slider').slick({
autoplay: true,
dots: true
});

});

ここでは、autoplay(自動再生)とdots(インジケータ=スライドの位置がわかる点)を追加しておきました。

 

他にもプロパティはいろいろあるので、ぜひ面白そうなものを追加してみてください。

 

scriptは結果的に以下のようにできます。

 

6. CSSなどで微調整して完成!

最後に、左に寄ってしまっている画像を中央揃えにするCSSだけ追加すれば、やっていることは多くはありませんが、かなり綺麗にまとまります。

 

 

以上でslickは使えるようになったと思います。

自分でjQueryを構築するのもアリですが、こういったアプリを使えることもまた大事なことなのかなと思います。

皆さんの参考になれば幸いです。

終わります。

コメント