如何仅在 xs-size 上从 bootstrap-carousel 中隐藏一两个元素?
当我将类“hidden-xs”添加到轮播中的这个元素时,元素 div 看起来像:
<div class="item hidden-xs">
<img src="imgTop2.jpg" alt="...">
</div>
所有的元素和旋转木马都消失了。
当我将“hidden-xs”类添加到此项的 img 元素时,存在同样的问题。
我该如何解决?我只想在 xs 上隐藏一两张幻灯片。其他必须可见。
我的代码如下:
<div id="carousel-top" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="hidden carousel-indicators" style="display:none">
<li data-target="#carousel-top" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-top" data-slide-to="1"></li>
<li class="" data-target="#carousel-top" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="imgTop.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop2.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop3.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop4.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop5.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
最佳答案
我想不出只使用 Bootstrap 帮助程序类来完成它的方法,因为轮播脚本依赖于 .item
类。但是您可以使用以下 jQuery:
if ($(window).width() < 960) {
$('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide');
}
您只需将类 .hide-on-mobile
添加到要在移动设备上隐藏的元素。
关于javascript - Bootstrap 轮播如何从 xs 大小的 slider 隐藏一项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29826448/