js/web

slick sliderの使い方 [3]

Posted on by cogumo

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

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

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

PCの時 横長画像

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

cogumo design

<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>

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

cogumo