7

使い勝手の良いslick.jsスライダー(レスポンシブ対応)

レスポンシブ対応「slick.js」スライダー

今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです!




まずはこんな感じ!といった「デモサンプル」を用意しましたので確認してみてください。

demo

デモサンプル1

横幅固定でセンター寄せのスライドになっています。左右にカルーセル付きの仕様になっています。

それでは使い方を見ていきましょう。

1.ファイルをダウンロード

はじめに、ファイル一式を公式サイトからダウンロードします。

slick

slickフォルダ」の中に以下のファイルが入っています。

slickフォルダ

これを任意の場所に配置して読み込みましょう。サンプルでは、ルート階層に「slickフォルダ」を配置したと仮定して話をしていきます。

2.必要なファイルを読み込む

CSSを読み込む

<head>内で上記のように“css”を読み込んでください。

jQueryとJavaScriptを読み込む

</body>の直前で“jQuery”と“JavaScript”を読み込んでください。

3.JavaScriptを記述

先ほどの「slick.js」を読み込んだ後に、上記のスクリプトを記述します。「.任意のクラス名」となっている部分に、お好きな名前を付けてください。ここでは、「.slide_type_a」というクラス名にしておきます。

4.HTMLを記述

画像を6枚スライドすると仮定して<li>タグで配置しています。ここでの画像サイズは「W:700×H:300px」のものを使っています。

5.CSSを記述

これでOKです。

こちらのサンプルがこちらになります▼

1.Single Item / シングルアイテム

デモサンプル1

スライドする枚数やスピード、表示する画像枚数などをオプションで追加することができます。これは後ほど記述しますね。

 

▼それでは、もう少し別のパターンのサンプルも見てみましょう。

2.Multiple Items / マルチプルアイテム

2.Multiple Items / マルチプルアイテム

次に横幅固定サイズで3枚の画像を表示するタイプになります。

先ほど手順【1】【2】までは同じで、【3.Javascriptを読み込む】ところから少し変わってしますので、そこから説明していきたいと思います。

3-2.Javascriptを読み込む

こちらはオプション設定で以下の要素を指定しています。

  • infinite: true; ・・・ 無限ループを有効にする
  • slidesToShow: 3; ・・・ 見えているスライドの数
  • slidesToScroll: 3; ・・・ 矢印ワンクリックでスライドする枚数

 

4-2.HTMLを記述

HTMLは、サンプル1とほとんど変わりませんが、唯一<ul>タグのクラス名を「.slide_type_b」としています。

5-2.CSSを記述

画像1つの横幅サイズを300pxで使っているために、<ul class=”slide_type_b”>の横幅を900pxにしています。表示したい画像サイズに合わせてそこは適宜変更してください。

これでOKです。

こちらのサンプルがこちらになります▼

デモサンプル2

 

ついでにもうひとつ、“レスポンシブ対応”のパターンも見ていきましょう。

3.Responsive Display / レスポンシブディスプレイ

3.Responsive Display / レスポンシブディスプレイ

こちらからウィンドウサイズに対応したレスポンシブ仕様になっています。

先ほど手順【1】【2】までは同じで、【3.Javascriptを読み込む】ところから少し変わってしますので、そこから説明していきたいと思います。

3-3.JavaScriptを読み込む

あわわわわわ・・・
ややこしくなってきましたね。。。

細かい詳細は置いておいて、とりあえずコピペしてもらっても構いません。オプションについては後ほど記述することにして次に進んじゃいますね(笑)

4-3.HTMLを記述

HTMLは、サンプル1とサンプル2とほとんど変わりませんが、唯一<ul>タグのクラス名を「.slide_type_c」としています。

5-3-1.CSSを記述

PC表示の時は、サンプル2と同じで<ul class=”slide_type_c”>の横幅を900pxにしておきます。ここからは、メディアクエリを使用していきますので<head>内に、「css3-mediaqueries.js」を読み込んでください。

メディアクエリについては、過去の記事でご紹介しています。いまいちよくわからない・・・という方は、参考にしてみてください。

【参考】IE8以下でメディアクエリが効かないとき…

メディアクエリーを読み込む

そしてデバイスサイズごとに、<ul class=”slide_type_c”>の横幅を切り替えるためにCSSを追記します。

 

5-3-2.CSSを追記

ブレイクポイントは「900px」「600px」としています。ここもお好きなサイズに変更して使ってもらえれば良いでしょう。

これでOKです。

こちらのサンプルがこちらになります▼

デモサンプル3

 

長くなってしまいましたが、ここまでで3つのサンプルを見てきました。これ以外にも、「画像サイズがまちまちなスライド表示」など、違ったパターンがあるので「slick公式サイト」で確認してみてください。

オプション

細かいオプションは以下のようになっています。

オプション名 デフォルト 説明
accessibility true 左右に配置される矢印の有/無
autoplay false 自動再生の有/無
autoplaySpeed 3000 スライドが切り替わる時間(ミリ秒)
cssEase ‘ease’ CSSでのアニメーション効果
ease/linear/ease-in/ease-out/ease-in-out
dots false スライド下に表示されるカレントナビの有/無
dotsClass ‘slick-dots’ カレントナビのクラス名
draggable true ドラッグ機能の有/無
easing linear jQueryのanimate()でのアニメーションタイプ
fade false フェードインでの表示の有/無
arrows true 前へ/次へナビの有/無
appendArrows $(element) 前へ/次へナビをカスタムで追加する
appendDots $(element) カレントナビをカスタムで追加する
prevArrow html buttonタグ 前へボタンをカスタムする
nextArrow html buttonタグ 次へボタンをカスタムする
infinite true 無限ループの有/無
initialSlide 0 最初のスライド位置
lazyLoad ‘ondemand’ 画像の遅延ロード
onBeforeChange
(this,currentIndex,targetIndex)
null メソッド スライドする前に実行
onAfterChange
(this,index)
null メソッド スライドした後に実行
onInit(this) null メソッド 初期化した際に実行
onReInit(this) null メソッド 初期化メソッドを実行した後にこちらのメソッドを実行
pauseOnHover true スライドにマウスオーバーした際に、自動再生を止める有/無
responsive null どの時点でレスポンシブ表示するかのブレークポイントを設定
slide div スライドする要素を変更
slidesToShow 1 見えているスライドの数
slidesToScroll 1 一度にスライドする数
speed 300 スライドアニメーションの時間(ミリ秒)
swipe true タッチスワイプの有/無
swipeToSlide false スライドの数に関係なくスワイプの有/無
touchMove true タッチでスライドの有/無
useCSS true CSS Transitionsの有/無
vertical false 縦方向のスライドの有/無
rtl false 右から左へスライド方向の変更の有/無

このように多くのオプション設定が用意されていますので、導入したいスライドの形式によって設定してみてください。

 

7 Comments

  1. 矢印のサイズが小さくなってしまいます。どうやって改善すればよろしいでしょうか。

    • 「サンクロ_M」さん
      コメントありがとうございます。
      NextとPrevのカーソルの矢印でしょうか。
      こちらは「slickフォント」にて表示しているため、別で画像を用意して「slick-theme.css」を修正すれば対応できると思います。

  2. マルチプルディスプレイで無事に導入できました。
    ありがとうございます。
    そのうえで、スライドイメージの下にテキスト(見出し)も一緒に表示したいのですが、どのようにHTMLを記述すればよいでしょうか。
    単純に内にを入れた場合には文字数がイメージの横幅を超えた場合に改行されずに隣まで突き抜けてしまいます。当記事の内容とは少し脱線してしまいますがご教授いただければ幸いです。

  3. 上記文章に抜けがありましたので追記させていただきます。
    「単純に<li>内に<h2>を入れた場合」

    • 「bonobono」さん
      コメントありがとうございます。

      デモサンプル
      デモサンプル2
      デモサンプル3

      上記の3つとも、画像の下にキャプションを入れたものをサンプルで作成してみましたが、このようなものでよろしかったでしょうか?
      ある程度CSSの調整でキャプションを改行しながら表示することは可能だと思います。試してみてください。

  4. 初めまして!
    非常に困っているんですが、上部に大きく表示された画像の右クリック画像保存(スマホで長押し保存)する方法てあるんでしょうか?

    • 「tomioka」さん
      コメントありがとうございます。

      右クリック保存についてですが、ブラウザによってできる場合と出来ない場合があるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 使い勝手の良いslick.jsスライダー(レスポンシブ対応)