当分辨率低于768时,是否可以移除自举旋转木马(V 3.0.0)?
我过去常常在CaroufredSel plugin上进行,但似乎无法使用bootstrap。
我每张幻灯片显示4个元素,但如果我将#myCarousel
设置为display:block;
,我会在另一个元素下方获得一个元素,但只会显示4个元素。
修改
似乎我的问题被误解了,我不想删除元素或轮播,我想删除轮播本身的功能,所以12个元素溢出并在第一个块中显示在另一个之下。
答案 0 :(得分:2)
我使用以下
使用javascript解决了这个问题$("#myCarousel .carousel-inner > .item").css("display","block");
因此,当分辨率低于768px时使用视口我将所有轮播项目设置为显示块,覆盖默认显示,不应用该引导程序。
发布答案,以帮助处于相同情况的其他人。
答案 1 :(得分:1)
扩展@DannyG的答案,并牢记不破坏元素的要求,我使用此代码解决了同样的问题。
$("#carousel").carousel("pause"); //pause any transition animation
$("#carousel .carousel-inner > .item").css("display", "block"); //show hidden slides
$("#carousel .carousel-control").css("display", "none"); //hide left, right arrows
$("#carousel .carousel-indicators").css("display", "none"); // hide thumbnails at the bottoms
仅显示隐藏的幻灯片是不够的。我也必须隐藏轮播控件。希望它可以帮到某人。
答案 2 :(得分:0)
@media only screen and (max-width: 768px) {
.slide-hide-on-mobile { display: none; }
}
<section class="slider-section slide-hide-on-mobile">
<!-- creat a section for slider and add class slide-hide-on-mobile-->
<div id="carouselExampleFade" class="carousel slide carousel-fade hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide.png">
</div>
</div>
</div>
</section>