如何销毁移动分辨率的引导轮播

Question

是否可以在分辨率低于 768 时删除引导轮播 （V 3.0.0）？

我曾经在 CaroufredSel 插件上这样做，但似乎不适用于引导程序。

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

编辑

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

Answer 1

我用jQuery解决了它，使用以下内容

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

因此，当分辨率低于 768px 时使用视口，我将所有轮播项目设置为显示块，覆盖默认显示 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>