如何销毁移动分辨率的 Bootstrap 旋转木马

Question

是否可以在分辨率低于 768 时删除 bootstrap 轮播 (V 3.0.0)？

我曾经在 CaroufredSel plugin 上这样做过，但在 bootstrap 上似乎不起作用。

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

编辑

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

Answer 1

我用 jQuery 解决了这个问题

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

因此，当分辨率低于 768px 时使用视口，我将所有轮播项目设置为显示块，覆盖 bootstrap 适用的默认显示 none。

张贴答案以帮助遇到相同情况的其他人。

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 旋转木马

How to destroy a Bootstrap Carousel for mobile resolutions

javascript

carousel

twitter-bootstrap-3