Slick の使い方 レスポンシブ対応 jqueryプラグインスライダー

slickJavascript

これまで色々なスライダープラグインがありましたが、今はこれ一択です。

簡単・軽い・レスポンシブ!備忘録を兼ねて使い方を紹介します。

Slickのダウンロード

以下より画面上部の [ Download Now ] をクリックしてダウンロード。
Slick 公式サイト

SlickのCSS・JSの読み込み

ダウンロードしたファイルのうち使うのは、以下3つ。

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

SCSS ファイルもあるので、CSSを編集する人は使うといいです。

//必須
<link rel="stylesheet" href="XXXX/slick.css"/>
//なくても平気
<link rel="stylesheet" href="XXXX/slick-theme.css">

//jQuery の読み込み(CDN で問題なし)
<script src="XXXXX/jquery.min.js"></script>
//必要な場合は読みこむ(バージョンの差異を補完するプラグイン/CDN で問題なし)
<script src="XXXXX/jquery-migrate-1.2.1.min.js"></script>
<script src="XXXXX/slick.min.js"></script>

CDNもあります

CDNも用意されているので、サーバーに設置するのが面倒い場合はこちらでも良いと思います。

//CSS
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

//JS
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

SlickのHTMLの記述方法

下記の [ className ] を適宜設定し、それの中にスライドさせたいコンテンツを挿入します。

<div class="className">
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
</div>

Slickの設定

基本的には、以下の記述のみでスライダーは動きます。

$(document).ready(function(){
  $('.className').slick({
    setting-name: setting-value//色々なオプションを設定できます(後述します)
  });
});

Slickの基本記述のまとめ

<html> <head>
  <title>タイトル</title>

  //必須
  <link rel="stylesheet" href="XXXX/slick.css">
  //なくても平気
  <link rel="stylesheet" href="XXXX/slick-theme.css">

  </head>
  <body>

  <div class="className">
    <div>コンテンツ</div>
    <div>コンテンツ</div>
    <div>コンテンツ</div>
  </div>

  //jQuery の読み込み(CDN で問題なし)
  <script src="XXXXX/jquery.min.js"></script>
  //必要な場合は読みこむ(バージョンの差異を補完するプラグイン/CDN で問題なし)
  <script src="XXXXX/jquery-migrate-1.2.1.min.js"></script>
  <script src="XXXXX/slick.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.className').slick({
        setting-name: setting-value//色々なオプションを設定できます(後述します)
      });
    });
  </script>

  </body>
</html>

オプションを設定することにより、色々なカスタイマイズができます。

オプション

オプション名説明デフォルト
accessibilityタブと矢印キーによるナビゲーションを有効にしますtrue
adaptiveHeightシングルスライドの水平カルーセルの適応型高さを有効にします。false
autoplay自動再生を有効にしますfalse
autoplaySpeedミリ秒単位の自動再生速度3000
arrows前/次の矢印true
asNavForスライダーを他のスライダー(クラスまたはID名)のナビゲーションになるように設定します。null
appendArrowsナビゲーション矢印がアタッチされている場所を変更します(セレクター、htmlString、配列、要素、jQueryオブジェクト)$(要素)
appendDotsナビゲーションドットがアタッチされている場所を変更します(セレクター、htmlString、配列、要素、jQueryオブジェクト)$(要素)
prevArrowノードを選択するか、「前の」矢印のHTMLをカスタマイズできます。<button type = "button" class = "slick-prev">前へ</ button>
nextArrowノードを選択するか、「次へ」の矢印のHTMLをカスタマイズできます。<button type = "button" class = "slick-next">次へ</ button>
centerMode部分的な前/次のスライドで中央ビューを有効にします。奇数番号のslidesToShowカウントで使用します。false
centerPaddingセンターモード時のサイドパディング(pxまたは%)50px
cssEaseCSS3アニメーションイージングease
customPagingカスタムページングテンプレート。使用例については、ソースを参照してください。なし
dotsドットインジケーターを表示するfalse
dotClassスライドインジケータードットコンテナーのクラスslick-dots'
draggableマウスのドラッグを有効にするtrue
fadeフェードを有効にするfalse
focusOnSelect選択した要素へのフォーカスを有効にする(クリック)false
easingjQuery animateにイージングを追加します。イージングライブラリまたはデフォルトのイージングメソッドで使用するlinear'
edgeFriction非無限カルーセルのエッジをスワイプするときの抵抗0.15
infinite無限ループスライディングtrue
initialSlideスライド開始0
lazyLoad遅延読み込みテクニックを設定します。 'ondemand' or 'progressive'を受け入れるondemand
mobileFirstレスポンシブ設定はモバイルの最初の計算を使用しますfalse
pauseOnFocusフォーカスの自動再生を一時停止true
pauseOnHoverホバー時に自動再生を一時停止true
pauseOnDotsHoverドットがホバーされたときに自動再生を一時停止するfalse
respondToレスポンシブオブジェクトが応答する幅。'window' 'slider' or 'min'(2つのうち小さい方)window
responsiveブレークポイントと設定オブジェクトを含むオブジェクト(デモを参照)。指定された画面幅で設定セットを有効にします。特定のブレークポイントでスリックを無効にするには、オブジェクトではなく「unslick」に設定を設定します。
rowsこれを1以上に設定すると、グリッドモードが初期化されます。slidesPerRowを使用して、各行に含めるスライドの数を設定します。1
slideスライドとして使用する要素クエリ
slidesPerRow行オプションを介して初期化されたグリッドモードでは、これは各グリッド行にあるスライドの数を設定します。1
slidesToShow表示するスライドの数1
lidesToScrollスクロールするスライドの数1
speedスライド/フェードアニメーションの速度300
swipeスワイプを有効にするtrue
swipeToSlideslidesToScrollに関係なく、ユーザーがスライドに直接ドラッグまたはスワイプできるようにするfalse
touchMoveタッチでスライドモーションを有効にするtrue
touchThresholdスライドを進めるには、ユーザーは(1 / touchThreshold)*スライダーの幅の長さをスワイプする必要があります5
useCSSCSS遷移の有効化/無効化true
useTransformCSS変換の有効化/無効化true
variableWidth可変幅スライドfalse
vertical縦スライドモードfalse
verticalSwiping垂直スワイプモードfalse
RTLスライダーの方向を右から左に変更しますfalse
waitForAnimateアニメーション中はスライドを進める要求を無視しますtrue
zIndexスライドのzIndex値を設定します。IE9以下で役立ちます1000

ソースサンプル

Comming Soon…

タイトルとURLをコピーしました