レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」

レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」

レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

slickは、レスポンシブ対応のカルーセル/スライダーを実装することができるjQueryプラグインです。非常に豊富なオプションも用意されています。

今回は、このslickの実装手順を紹介したいと思います。そんなに難しくないので、ぜひチャレンジしてみてください。

スポンサードリンク

ステップ1. ファイルのダウンロードと設置

slickの公式サイトにアクセスし、「get it now」からファイル一式をダウンロードします。

get it now

zipファイルを解凍したら、以下のフォルダとファイルをサーバー上にアップロードします。

  • fontsフォルダ
  • slick.css
  • slick-theme.css
  • slick.min.js

fontsフォルダとslick-theme.cssは同階層に設置してください。

ステップ2. HTMLのマークアップ

<head>~</head>内で、以下のようにアップしたcssファイルをロードします。

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

続いて、</body>の直前で、以下のようにjQueryとslick本体をロードします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/slick.min.js"></script>

スライドを表示する部分は、以下のように画像をリストで記述します。

<ul class="slide">
<li><img src="images/slide/slide1.png"></li>
<li><img src="images/slide/slide2.png"></li>
<li><img src="images/slide/slide3.png"></li>
<li><img src="images/slide/slide4.png"></li>
<li><img src="images/slide/slide5.png"></li>
</ul>

ステップ3. slickの実行

最後に、</body>の直前に以下を追加して、slickを実行します。

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

「.slide」の部分は、画像を包括しているulに付与したクラスと合わせます。

スライダーの矢印を差し替える

ナビゲーションの矢印をオリジナル画像に差し替えるには、「appendArrows」オプションを指定します。

以下のように、スライドの下に矢印用の画像をマークアップしておきます。

<ul class="slide">
<li><img src="images/slide/slide1.png"></li>
<li><img src="images/slide/slide2.png"></li>
<li><img src="images/slide/slide3.png"></li>
<li><img src="images/slide/slide4.png"></li>
<li><img src="images/slide/slide5.png"></li>
</ul>
<div id="slide-arrow">
<div class="slick-next"><img src="images/slide-next.png" alt=""></div>
<div class="slick-prev"><img src="images/slide-prev.png" alt=""></div>
</div>

appendArrowsオプションで、矢印画像を包括しているIDを指定すると、ナビゲーションの矢印を差し替えることができます。

<script>
$(function(){
$('.slide').slick({
autoplay:true,
autoplaySpeed:5000,
dots:true,
pauseOnHover:true,
appendArrows: $('#slide-arrow')
});
});
</script>

サムネイル付きのスライダーを設置する

サムネイル付きのスライダーを設置するには、メインのスライドとサムネイル用のスライドを2つ作成します。

<ul class="slide thumb-item">
<li><img src="images/slide/slide1.png"></li>
<li><img src="images/slide/slide2.png"></li>
<li><img src="images/slide/slide3.png"></li>
<li><img src="images/slide/slide4.png"></li>
<li><img src="images/slide/slide5.png"></li>
</ul>
<ul class="slide thumb-item-nav">
<li><img src="images/slide/slide-nav1.png"></li>
<li><img src="images/slide/slide-nav2.png"></li>
<li><img src="images/slide/slide-nav3.png"></li>
<li><img src="images/slide/slide-nav4.png"></li>
<li><img src="images/slide/slide-nav5.png"></li>
</ul>

スクリプトは以下のように記述します。

<script>
$(function(){
$('.thumb-item').slick({
autoplay:true,
infinite:true,
autoplaySpeed:5000,
speed:500,
dots:false,
pauseOnHover:false,
arrows:false,
fade:true,
asNavFor: '.thumb-item-nav'
});
$('.thumb-item-nav').slick({
accessibility: true,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.thumb-item',
focusOnSelect: true
});
});
</script>

「asNavFor」でメインのスライドとサムネイルをそれぞれ指定して、スライドの切り替わりを連動させます。また、サムネイルの「focusOnSelect」をtrueにすると、表示中スライドのサムネイルに”slick-current”というクラスが追加されます。

上記を記述すれば、横並びのサムネイルが表示されますので、あとはCSSで見た目を調整しましょう。

オプション

代表的なオプションについては、以下の通りです。

autoplay 自動再生
autoplaySpeed 自動再生の間隔
arrows ナビゲーション(矢印)の表示
dots スライド数を示すドットの表示
fade フェードイン・フェードアウトの切り替え効果
infinite ループの有無
pauseOnHover マウスホバーで自動再生を一時停止
pauseOnDotsHover ドットにマウスホバーで自動再生を一時停止

オプションは他にも用意されていますので、詳しくは公式サイトをご参照ください。

あとがき

シンプルなカルーセル/スライダーも個性的なものも、どちらも実装可能なプラグインですね。

サイトに導入するカルーセル/スライダーのプラグインで迷ったら、slickもぜひ検討してみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

One thought on “レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」

  1. Pingback: レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」 | TechMemo – Temporary index

コメントを残す

メールアドレスが公開されることはありません。