レスポンシブ対応について

slickのオプションで「responsive」というものがあり「breakpoint」を設定できてオプションを切り替えることができます。

私が実装したいと思っていたのはレスポンシブであり、スマートフォンの時は写真を縦長のものに変更するということでした。以前はスライド自体を差し替えていたのですがそれぞれの時に両方の画像を読み込んでしまって重くなってしまうのが気になっていました。

PCの時 横長画像

スマートフォンの時　縦長画像

<pictuire>タグと<source>タグを使って切り替えたいと思います。

<ul class="slides">
    <li>
    <a href="#">
      <picture>
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" />
      </picture>
    </a>
  </li>
  <li>
    <a href="#">
      <picture>       
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" />
      </picture>
    </a>
  </li>
  <li>
    <a href="#">
      <picture>       
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" /></a></li>
      </picture>
    </a>
  </li>
  </ul>

ここまでのサンプルはこちら

どうしてslickを使うのかときかれると色々オプションがあるからというのも大きな一つの理由です。色々説明されているサイトがあるのでしらべていけばよいのですが毎回調べるのが大変なので自分のためにもと思いよく使うものをざっくり

たとえば

・自動再生：autoplay（デフォルトはtrue)

・左右の矢印をカスタマイズ：arrows（デフォルトはtrue）

・スピード：speed（ミリ秒です！１秒＝1000ミリ秒）

・スライドをループ：infinite（デフォルトはtrue）

「slick　オプション」で検索すると色々出て来ます！

上記を実装したのがこちらです。

commmon.js

$(function(){
  $(".slides").slick({
  	autoplay: true,
    speed: 1000,
    prevArrow: '<button class="slide-arrow prev"></button>',
    nextArrow: '<button class="slide-arrow next"></button>',
    infinite: true,
});
});

common.css

/*arrow*/
button{
  margin: 0;
  padding: 0;
  background: none;
}
.slide-arrow{
  position: absolute;
  top: 50%;
}
.slide-arrow.prev{
  left: -40px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 15px solid #9C27B0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}
.slide-arrow.next{
  right: -40px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid #9C27B0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}

ここのサンプルはこちら