javascript - Bootstrap 根据分辨率使用不同的 jQuery 插件

Question

我想使用两种类型的 slider 。

第一个:在移动设备上查看页面时的简单图库 slider 。

第二个:在计算机上查看页面时更复杂的 slider 。

最好的方法是什么？

Answer 1

您可以为此使用媒体查询，以不同的方式创建 2 个 slider

<div id="ComplexSlider" style="display: none;">
   // All your code
</div>

<div id="Mobilelider" style="display: none;">
   // All your code
</div>

@media (max-width: 320px){
#ComplexSlider{
display: none;
}

#MobileSlider{
display: block;
}
}

@media (min-width: 321px){
#ComplexSlider{
display: block;
}

#MobileSlider{
display: none;
}
}