レスポンシブ サイトの構築。基本的に、BxSlider に 2 セットの画像を用意したいと考えています。1 セットは特定のウィンドウ サイズまで表示するためのセットで、もう 1 セットはそのサイズを超える任意のサイズに設定するためのものです。私はこれらの線に沿ってアプローチを試みましたが、BxSlider は状態間でスムーズに遷移しません (実際に期待していませんでした):
<ul class="bxslider">
<li class="display_below_size"><img src="/img/image1.jpg" /></li>
<li class"display_above_size"><img src="/img/image2.jpg" /></li>
</ul>
.display_below_size {
display:block;
}
.display_above_size {
display:none;
}
@media only screen and (min-width: 1300px) {
.display_below_size {
display:none;
}
.display_above_size {
display:block;
}
}
これを整理するためにJavaScriptを書くべきだと思いますか、それともcssでそれを行う方法はありますか?
前もって感謝します!