カルーセルスライダーslick

レスポンシブコーディングの際に簡単に使えるカルーセル

スライダーは今コーディングする際に必須のアイテムとなってます。
レスポンシブしないとSEO的にも上がりません。

基本の使い方

slick配布元からファイルをダウンロードし、コーディングしているフォルダへ組み込みます。
コーディングの際に使用するのは、ダウンロードしたファイルの中に入ってる以下のファイルです。

ダウンロード後、ヘッダー部分に下記のソースを入れ込みます。

  
  
  
  

表示させたい部分に下記のHTMLを記載いたします。

  

共通に使えるCSS

  /*左右の矢印の色を変える*/
  .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;
  }
参考サイト