簡単!レスポンシヴにも対応した便利なjQueryスライダープラグイン[slick.js]

解説

スライダー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 右から左になるようにスライダーの方向を変更します

 

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

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