Question

我想使用两种类型的滑块。

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

第二个：在计算机上查看页面时更复杂的滑块。

这样做的最佳方式是什么？

Answer 1

您可以使用媒体查询，不同地创建2个幻灯片

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

Answer 2

查看文档：{{3}}

您只需在类属性中指定要显示或不显示的设备。

.hidden-xs无法在超小型设备上打印

.hidden-sm无法在小型设备上打印

.hidden-md不会在中型设备上打印

.hidden-lg无法在大型设备上打印

<div id="ComplexSlider" class="hidden-xs ">
   ...
</div>

<div id="Mobilelider" class="hidden-sm hidden-md hidden-lg">
   ...
</div>

Bootstrap使用不同的jQuery插件取决于分辨率

2 个答案: