正攻法というか実用面で強そうなのを羅列。
やりたいこと
PCとスマホでスライドショーに表示する画像を変更する。
単に画像を差し替えるだけじゃなくて、例えばPC：1920*1080、SP：1080*1920みたいな、寸法が変わってもやっていける感じのを作る。
環境
jQueryのプラグインとかでスライドショーは大量にある。いくつか触ってみて、それぞれに癖はあるけど今回やりたいことに関わる部位は大差ないと思う。
本記事では最近良く使ってるslick.jsをベースに話をすすめる。
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping ...
kenwheeler.github.io
背景に画像を仕込む
<div class="slider">
<div class="slide"><div class="bg"></div></div>
<div class="slide"><div class="bg"></div></div>
<div class="slide"><div class="bg"></div></div>
<div class="slide"><div class="bg"></div></div>
</div>.slide{
width: 100%;
height: 0;
padding-top: 56.25%; /* 9/16 */
position: relative;
}
.slide .bg{
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
.slide .bg:nth-child(1){ background-image: url(img01.jpg);}
.slide .bg:nth-child(2){ background-image: url(img02.jpg);}
.slide .bg:nth-child(3){ background-image: url(img03.jpg);}
.slide .bg:nth-child(4){ background-image: url(img04.jpg);}
@media screen and (max-width:767.98px){
.slide{
padding-top: 177.777%; /* 16/9 */
}
.slide .bg:nth-child(1){ background-image: url(img01_sp.jpg);}
.slide .bg:nth-child(2){ background-image: url(img02_sp.jpg);}
.slide .bg:nth-child(3){ background-image: url(img03_sp.jpg);}
.slide .bg:nth-child(4){ background-image: url(img04_sp.jpg);}
}例えばこんな感じ。
@mediaでブラウザ幅の条件分岐を作って、画像の切り替えと表示領域のサイズを変更する。
html上で切り替える
<div class="slider">
<div class="slide"><picture><source srcset="01_sp.jpg" media="(max-width:767.98px)"><img src="01.jpg" alt=""></picture></div>
<div class="slide"><picture><source srcset="02_sp.jpg" media="(max-width:767.98px)"><img src="02.jpg" alt=""></picture></div>
<div class="slide"><picture><source srcset="03_sp.jpg" media="(max-width:767.98px)"><img src="03.jpg" alt=""></picture></div>
<div class="slide"><picture><source srcset="04_sp.jpg" media="(max-width:767.98px)"><img src="04.jpg" alt=""></picture></div>
</div><picture>はかなり融通が利くのでこっちの方が楽かもしれない。
<source>のおかげでhtml上の設定だけで画像が切り替わるようになる。
html上で画像を表示すれば画像が持つサイズがコンテンツ幅に影響するんで、背景指定みたいに寸法指定の手間がない。
注意点
今のスライドはレスポンシブに対応したものが多いけど、表示画像の寸法が変わるときに表示がおかしくなるものもたまにある。調整が効かないなら今使ってるものから変更したほうがいい。無理しても変な動作になったりするし。
よくあるパターン
<div class="slider pc">
<div class="slide"><img src="01.jpg" alt=""></div>
<div class="slide"><img src="02.jpg" alt=""></div>
<div class="slide"><img src="03.jpg" alt=""></div>
<div class="slide"><img src="04.jpg" alt=""></div>
</div>
<div class="slider sp">
<div class="slide"><img src="01_sp.jpg" alt=""></div>
<div class="slide"><img src="02_sp.jpg" alt=""></div>
<div class="slide"><img src="03_sp.jpg" alt=""></div>
<div class="slide"><img src="04_sp.jpg" alt=""></div>
</div>@media screen and (min-width:768px){
.sp{display: none;}
}
@media screen and (max-width:767.98px){
.pc{display: none;}
}以前からあるPCとスマホそれぞれでスライドショーを作って表示/非表示を切り替えるみたいなので対処するやつは、PCとスマホでコンテンツを丸々変えるんであればいいと思うけどね。非表示であれ読み込みが発生する組み方なので回線に優しくないからあまり採用したくない。
というか、個人的に、コレは動作不良が起きるので使いたくない。結構な頻度でスライドが切り替わらないとかの動作がバグるとかそもそも表示されないとか、不安定なことが多くて対処もだるかった。
コメント