Question

当分辨率低于768时，是否可以移除自举旋转木马（V 3.0.0）？

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

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

修改

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

Answer 1

我使用以下

使用javascript解决了这个问题

$("#myCarousel .carousel-inner > .item").css("display","block");

因此，当分辨率低于768px时使用视口我将所有轮播项目设置为显示块，覆盖默认显示，不应用该引导程序。

发布答案，以帮助处于相同情况的其他人。

Answer 2

扩展@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

仅显示隐藏的幻灯片是不够的。我也必须隐藏轮播控件。希望它可以帮到某人。

Answer 3

  @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>

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

3 个答案: