【jQuery】レスポンシヴにも対応したクオリティの高いカルーセル・スライダー[slick]の使い方。

Ads by Google

高機能・高品質なカルーセル・スライダー[slick]の使い方を紹介します。

このカルーセル・スライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」等、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you'll ever need.」(訳:あなたが必要とする最後のカルーセル)と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの製作者がオススメしているようです。

公式サイトは以下。
「get it now」というリンクをクリックすると配布されているファイル一式をダウンロードすることができます。

[slick]公式サイト

ダウンロードしたzipファイルを解凍すると、いくつかのファイルとフォルダが展開されますが、このうち主に必要なのは以下のリストに挙げたファイルになります。

  • slick-theme.css
  • slick.css
  • slick.min.js

他に「fonts」というフォルダにフォントのファイル一式が内包されていますが、これはスライダーをコントロールするナヴィゲーションの矢印やドットを表示する際に使われます。
デザインを独自にカスタマイズするのであれば不要ですが、デフォルトの状態のまま利用する際はこれらも必要になります。

なお、このフォントファイルはスタイルシートの「slick-theme.css」内で読み込むように設定されています。

以下、詳しい実装方法を紹介します。

[slick]の実装方法

まずはHTMLの <head>〜</head> 内で[slick]のファイル一式とjQueryの本体ファイルを読み込みます。

<head>
<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="slick.min.js"></script>
</head>

ここでは仮に、GoogleのCDNにホストされているヴァージョン「2.1.3」のjQuery本体ファイルを読み込んでいます。

続いて[slick]を使うスライダー部分ですが、こちらは以下のようなシンプルなコードでOKです。

<ul class="sample">
<li><img src="images/sample-01.png"></li>
<li><img src="images/sample-02.png"></li>
<li><img src="images/sample-03.png"></li>
</ul>

最後に[slick]を起動させるための初期設定のコードをHTMLの任意の箇所に記述。
基本的にはこれで動くようになります。

<script>
$(function(){
$('.sample').slick({
autoplay:true,
autoplaySpeed:2000,
dots:true,
pauseOnHover:true
});
}); 
</script>

なお上記の設定では、クラス名「.sample」の箇所に[slick]を効かせ、自動再生を有効化、その自動再生の間隔は2秒に指定、サムネイルのドットを表示、マウスカーソルを充てると自動再生が一時停止、という内容になっています。

[slick]のオプション設定

代表的な、よく使うオプションを以下に紹介します。

autoplay
自動再生
autoplaySpeed
自動再生の間隔
arrows
左右のナヴィゲーションの矢印を表示
dots
サムネイルのドットを表示
draggable
ドラッグによるコントロール
fade
スライダーの要素をフェードイン・フェードアウトで切り替え
easing
easingの種類を指定可能
infinite
ループさせるか否か
pauseOnHover
マウスオーバーで自動再生を一時停止
pauseOnDotsHover
ドットにマウスオーバーで一時停止
responsive
レスポンシヴの設定

その他にもたくさんのオプションが用意されています。
詳細は公式サイトをご覧ください。

実際に動作するサンプルは以下のリンク先からどうぞ。

[slick]:動作サンプル

オンズでは、新規のホームページ制作だけでなく、こういった便利なプラグインを既存のホームページに設置するお手伝いも承っています。
比較的に安価で高機能なシステムを導入できますので、ご要望のある方はぜひお問い合わせください。

お問い合わせフォームは以下より。

お問い合わせ

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google