[slick.js]PC・SPでスライドの表示画像を切り替える方法

お手軽

提起
環境
コード

提起

トップ画像のところをスライダーを作ります。
PC・SPで表示する画像を変えたいです。
画像の切り替え基準はブラウザ幅です。
HTMLとjQueryが使えます。

以上の縛りで作る場合、大手ですらいまだにスライド自体をPC・SPで切り替えたりしてることが多々見受けられる。僕自身もそうしたし、jsで表示画像を差し替えるとかそういうこともやってた。
めんどくさいし安定しないし、どうしたもんかっていうね。画像差し替えの面倒が高じてSP時は画像を拡大表示しつつ表示位置を数値入力して無理やりトリミングする、とかも、ものによってはいけるんだけど、ものによっては無理矢理過ぎるってのがある。あかん。

それがたまたま見たhtmlタグで解消したっていう話。

環境

jQuery3系
slick.js 1.6.0

slick.js専用とは言わないけど、とりあえずこれで動いたのでこれ前提でやっていく。
slick.jsはBxSlider.jsより安定しててSlider.jsよりも楽だから最近気に入っている。

コード

肝の部分だけ。

<div id="slider">
    <picture class="slide-item">
        <source media="(max-width: 767.98px)" srcset="img/topimg_sp_01.jpg">
        <img src="img/topimg_01.jpg" alt="">
    </picture>
    <picture class="slide-item">
        <source media="(max-width: 767.98px)" srcset="img/topimg_sp_02.jpg">
        <img src="img/topimg_02.jpg" alt="">
    </picture>
    <picture class="slide-item">
        <source media="(max-width: 767.98px)" srcset="img/topimg_sp_03.jpg">
        <img src="img/topimg_03.jpg" alt="">
    </picture>
    <picture class="slide-item">
        <source media="(max-width: 767.98px)" srcset="img/topimg_sp_04.jpg">
        <img src="img/topimg_04.jpg" alt="">
    </picture>
</div>

Slick.jsはレスポンシブどうのこうののoptionの設定をしなくても勝手に最適化してくれる。
ブラウザ幅をいじって画像が差し替わっても動作に影響が出ないのはbxsliderと戦ってた人からしたらとても素敵。

それを踏まえつつ、<picture>は差し替えのすべてを解決した。<picture>はHTMLで完結した差し替えができる。classとかjsで差し替える必要がないのはとても助かる。