解説
スライダーjQueryプラグイン[slick.js]のご紹介です。 シンプルなスライダーから、複数枚を同時に表示させるなど、オプション指定によってさまざまな形にカスタマイズできます。 レスポンシブウェブにも対応していますので、スマホサイトにも活用できます。 プラグインの配布サイト「slick」のページから、 「get it now」をクリックしてファイル一式をダウンロードしてください。 下記のデモでは、シンプルな1カラムのスライダーです。 ブラウザ横幅640ピクセル以下になると、スマホ用の表示になるよう、 CSSを独自でカスタマイズしました。
HTML
上記のサンプルにした場合のHTMLソースです。
<div class="fade"> <div> <img src="a0070_000239_m.jpg" width="1600" height="1200" alt="a"> </div> <div> <img src="a0070_000240_m.jpg" width="1600" height="1200" alt="a"> </div> <div> <img src="a1320_000223_m.jpg" width="1600" height="1200" alt="a"> </div> </div>
CSS
CSSは下記のファイルを読み込みます。 メディアクエリーでレスポンシブ対応のCSSを追加してます、
<link rel="stylesheet" type="text/css" href="reset.css"/> <link rel="stylesheet" type="text/css" href="slick.css"/> <link rel="stylesheet" type="text/css" href="slick-theme.css"/> <style type="text/css"> .fade{ width:640px; margin:0 auto; } .fade div{ width:100%; height:auto; } .fade img{ width:100%; height:auto; } @media screen and (max-width: 640px) { .fade{ width:100%; margin:0 auto; } .slick-arrow{ z-index:999!important; } .slick-prev { left: 25px; } [dir='rtl'] .slick-prev { right: 25px; } .slick-next { right: 25px; } [dir='rtl'] .slick-next { left: 25px; } .slick-prev:before, .slick-next:before { color: #fff; } } </style>
jQuery
jsパラメーター指定です。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.fade').slick({ dots: true, infinite: true, speed: 500, fade: true, autoplay: true, arrows: true, cssEase: 'linear' }); }); </script>
オプション設定
その他、下記のオプション指定ができます。 本サイトの内容をGoogle翻訳で適当に訳したので、日本語がおかしいところがありますが、ご了承ください。 本サイトはこちら。
プロパティ | タイプ | 値(デフォルト値) | 説明 |
---|---|---|---|
accessibility | boolea n | true | タブ移動可能にし、ナビゲーションキーを矢印 |
adaptiveHeight | boolean | false | 単一のスライド水平カルーセルのための適応高さを有効にします。 |
autoplay | boolean | false | 自動再生が有効 |
autoplaySpeed | int型(ミリ秒) | 3000 | ミリ秒単位で自動再生スピード |
arrows | boolean | true | 前/次の矢 |
asNavFor | string | ヌル | 他のスライダーのナビゲーションようにスライダーを設定します(クラスまたはID名) |
appendArrows | string | $(object) | ナビゲーション矢印が接続されている場所を変更します(セレクタ、htmlString、配列、object、jQueryobject) |
prevArrow | string(HTML | jQueryのセレクタ)|object(DOMノード| jQueryobject) | <ボタンタイプ= "ボタン"クラス= "スリック-PREV">前</ button>の | あなたはノードを選択するか、「前」矢印のHTMLをカスタマイズすることができます。 |
nextArrow | string(HTML | jQueryのセレクタ)|object(DOMノード| jQueryobject) | <ボタンタイプ= "ボタン"クラス= "スリック – 次の">次へ</ button>の | あなたはノードを選択するか、「次へ」の矢印のHTMLをカスタマイズすることができます。 |
centerMode | boolean | false | 部分的な前/次のスライドと中心ビューを可能にします。> 奇数番号slidesToShow数を使用します。 |
centerPadding | string | 「は50px ' | センターモードのサイドパディング(PXまたは%) |
cssEase | string | 「使いやすさ」 | CSS3アニメーションのイージング |
customPaging | function | N / A | カスタムページングテンプレート。> 使用例のソースを参照してください。 |
dots | boolean | false | ドット指標を表示 |
draggable | boolean | true | マウスドラッグを有効にします |
fade | boolean | false | フェードを有効にします |
focusOnSelect | boolean | false | 選択したobjectにフォーカスを有効にする(クリック) |
easing | string | 「リニア」 | jQueryのアニメーションのイージングを追加します。> 緩和ライブラリまたはデフォルトのイージングメソッドを使用します |
edgeFriction | integer | 0.15 | 非無限カルーセルのエッジをスワイプ抵抗 |
infinite | boolean | true | 無限ループスライディング |
initialSlide | integer | 0 | スライド上で開始します |
lazyLoad | string | 'オンデマンド' | 遅延ロード技術を設定します。> 「オンデマンド」または「プログレッシブ」を受け入れ |
mobileFirst | boolean | false | 応答の設定は、モバイル最初の計算を使用します |
pauseOnHover | boolean | true | ホバーで自動再生を一時停止 |
pauseOnDotsHover | boolean | false | ドットがホバーされたときに自動再生を一時停止 |
respondTo | string | 'ウィンドウ' | 応答objectが応答することを幅。> 「ウィンドウ」、「スライダー」または「分」をすることができます(2の小さい方) |
responsive | object | なし | ブレークポイントと設定objectを含むobject(デモを参照してください)。>指定された画面の幅に設定セットを有効にします。> 「unslick」の代わりにobjectのセットの設定は、指定されたブレークポイントでスリックを無効にします。 |
rows | int型 | 1 | 1以上に設定すると、グリッドモードを初期化します。> 各行にする必要がありますどのように多くのスライドを設定するslidesPerRowを使用してください。 |
slide | object | '' | スライドとして使用するobjectの問合せ |
slidesPerRow | int型 | 1 | 行オプションでintializedグリッドモードでは、これが多くのスライドは、各グリッド行であるかを設定します。> dver |
slidesToShow | int型 | 1 | ショーへのスライドの# |
slidesToScroll | int型 | 1 | スクロールするスライドの# |
speed | int型(ミリ秒) | 300 | スライド/フェードアニメーションの速度 |
swipe | boolean | true | スワイプの有効化 |
swipeToSlide | boolean | false | ユーザーがslidesToScrollにかかわらず、スライドにドラッグするか、直接スワイプすることを許可します |
touchMove | boolean | true | タッチでスライドモーションを有効にします |
touchThreshold | int型 | 5 | スライドを進めるためには、ユーザは、(1 / touchThreshold)の長さを強打しなければならない*スライダーの幅 |
useCSS | boolean | true | /無効CSSトランジションを有効にします |
variableWidth | boolean | false | 可変幅スライド |
vertical | boolean | false | 縦スライドモード |
verticalSwiping | boolean | false | 垂直スワイプモード |
RTL | boolean | false | 右から左になるようにスライダーの方向を変更します |