スライダープラグインslick.jsの実装・カスタマイズまとめ

 
 

模写した時に、jQueryのスライダープラグイン『slick.js』を使ったので、使い方をまとめておきます。

初めてこのプラグインを利用する人、使い方を忘れてしまった人などは参考になると思います。

スポンサーリンク

1.slickスライダーの実装方法

まずslickスライダーの実装方法を解説します。手順通りにやればだれでも簡単にスライダーが作れちゃいますよ。

①slick.jsをダウンロードする

公式サイトは以下です。

slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

『get it now』からDLしましょう。

DLしたフォルダの中の、

  • ajax-loader.gif
  • fontフォルダ
  • slick-theme.css
  • slick.css
  • slick.min.js

を自分の構築しているサイトのフォルダに入れます。(slick.min.jsはjsフォルダに、それ以外は、cssフォルダに入れる、といった感じ)

②cssの読み込み

CSSを読み込みましょう。

③jsの読み込み

</body>の直前でjsの読み込みを行います。

④スライダー用の画像を用意する

スライダーを施した画像をul、liで囲み、ulには、idかclass属性をつけます。名前は何でもOKです。

⑤jQueryのコードを書く

自分で作成したjsファイルに以下のコードを書きます。ulに付けた名前を、呼び出すだけ。

たったこれだけで、スライダーが完成しちゃいます。

2.カスタマイズする

ここからは、slickスライダーのカスタマイズをまとめていきます。

jsによるカスタマイズ

jsファイルに書いたコードに、オプションのコードを書き足していくだけで、様々なカスタマイズが可能です。

たくさんありすぎるので、公式サイト見たほうが早いです。

また、レスポンシブの設定は以下の通りです。

ブレイクポイントの数値は、その以下になった場合のオプションを設定します。

CSSによるカスタマイズ

jsでできないことは、cssを使ってカスタマイズしていきましょう。

ドットの大きさを変更する

スライダーのドットを変更する場合は、『.slick-dots li button:before クラス』を書き換えます。
このクラスの中でfont-size:6pxとなっているので、数字を大きくすれば、ドットは大きくなります。

ですが、6pxより小さくしてもドットは小さくならない。これは、font-family:slick;が原因のようです。これを別のフォントにして、font-sizeを変更すればドットは小さくなります。

font-size:19pxで、もとのドットの大きさより小さくなりました。

3.【番外編】CDNを使う

CDNを使って、slickスライダーを実装できます。

以下のサイトからの引用です。

slick.jsをCDNで読み込む
スライダーを簡単に作成できるslick.jsのCDNのタグをまとめています。CSSも入ってるのでレイアウトも矢印やドットも簡単に作れます。JQueryのCDNも載せています。

CDNを使うときは、バージョンを合わせないとうまくいかないようで、配置がずれることもありました。DLしたほうが、確実かと思います。

4.WordPressでの実装

WordPressでの実装もまとめておきます。

①DLしたslickフォルダをWordPressのindex.phpがある階層にアップロード

②cssの読み込み

③jsの読み込み

参考動画

今回実装に関しては、以下の動画を参考にました。かなりわかりやすく説明してくれているので、よかったら参考にしてみてください。

【5分で】スライダープラグイン「slick」の実装方法【解説】

スポンサーリンク

おすすめ記事

フォローする