如何破坏Bootstrap Carousel的移动分辨率

时间:2015-04-21 21:05:59

标签: javascript twitter-bootstrap-3 carousel

当分辨率低于768时,是否可以移除自举旋转木马(V 3.0.0)?

我过去常常在CaroufredSel plugin上进行,但似乎无法使用bootstrap。

我每张幻灯片显示4个元素,但如果我将#myCarousel设置为display:block;,我会在另一个元素下方获得一个元素,但只会显示4个元素。

修改

似乎我的问题被误解了,我不想删除元素或轮播,我想删除轮播本身的功能,所以12个元素溢出并在第一个块中显示在另一个之下。

3 个答案:

答案 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>