スライドショーを設置

スライドショーの jQuery のなかでレスポンシブに強いカルーセルスライダー「slick」を使ってみる


からファイルをダウンロード
解凍したら以下ファイルを使用するホームページそれぞれの任意フォルダーに格納する

 slick
├ fonts
├ slick.css
├ slick-theme.css
├ slick.min.js
└ ajax-loader.gif

今回使用したファイルは「slick.css」「slick-theme.css」「slick.min.js」の3つ

格納フォルダ例)
スタイルシート用に「css」フォルダ
jQuery用に「js」フォルダ

※「fonts」は矢印データ
以下のスタイルで変更可能↓↓↓↓↓↓↓↓↓
/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
     left: 15px;
    z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #fff;
}
/*スライド画像の横幅可変*/
img {
    max-width: 100%;
     height: auto;
}

スライダー設置本番

1.設置したい場所に以下のタグを打つ↓↓↓↓↓↓↓
<div class="your-class">
  <div>イメージデータ01</div>
  <div>イメージデータ02</div>
  <div>イメージデータ03</div>
</div>

2.<head></head>に外部スタイルを読み込む↓↓↓↓↓↓↓
<link rel="stylesheet" type="text/css" href=“設置フォルダ名/slick.css"/>
<link rel="stylesheet" type="text/css" href=“設置フォルダ名/slick-theme.css"/>

3.<body></body>の最後ににjavaスクリプト(jQuery)を読み込む↓↓↓↓↓↓↓
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="設置フォルダ名/slick.min.js"></script>
※//code.jquery.com/jquery-1.11.0.min.js はサーバーにアップすれば読み込むようになるが
アップ前に動作確認するには http: をつければ読み込むことができる

3.<body></body>の最後ににjavaスクリプト(jQuery)を読み込む↓↓↓↓↓↓↓
<script type="text/javascript">
    $(document).ready(function(){
      $(‘.任意のクラス名’).slick({
        setting-name: setting-value ←動かしたい設定を入れる
      });
    });
  </script>

ページへのセッティングは終了

今回使用したスライドショーの設定
フェードしながらすく数の画像を表示
<script type="text/javascript">
    $(document).ready(function(){
      $(‘任意のクラス’).slick({
        autoplay:true,
autoplaySpeed:2000,
dots:true,
   //infinite: true,
  //speed: 500,
  fade: true,
  //cssEase: 'linear'
      });
    });
  </script>

数種類の画像をシームレスでスライド
<script type="text/javascript">
    $(document).ready(function(){
      $(‘.任意のクラス’).slick({
        arrows: false,
     autoplay: true, ← 自動スクロール
     autoplaySpeed: 0, ← 自動スクロールの時間
     cssEase: 'linear', ← なめらかなスクロール
     speed: 5000, ← 自動スクロールのスピード 5秒
     slidesToShow: 5, ← 一画面に表示できる画像の数
     slidesToScroll: 1, ← スクロールする数
      });
    });
  </script>

いろいろなオプションがあるけど 組み合わせもあるようで思うように動かなくなる
先人の知恵をお借りするのが一番近道です。

これより先はプライベートモードに設定されています。閲覧するには許可ユーザーでログインが必要です。