如何在移动端分辨率下禁用Bootstrap走马灯效果

Question

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

我以前在CaroufredSel插件上这样做，但在Bootstrap上似乎不起作用。

我每个幻灯片显示4个元素，但如果我将#myCarousel设置为display:block;，则只会显示4个元素，但一个元素位于另一个元素下面。

编辑

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

- DJG22

---

仅将其隐藏或移除对您有用吗？ - Ted

不会的，轮播图有12个元素，以4x4的方式显示，在768px以下的屏幕上我必须将它们显示为块状（听起来很奇怪，但这是客户的要求）。 - DJG22

“在块内”是什么意思？垂直的吗？是指单独而不是4x4吗？ - Adam Kewley

您可以根据需要嵌套Bootstrap网格。像col-sm-3这样的类将在屏幕进入xs模式（例如，低于766px，如您所述）时折叠。因此，请考虑使用Bootstrap网格构建内部面板4x4。但是，这样做可能会导致旋转木马出现一些奇怪的行为，但值得一试。 - Adam Kewley

жҲ–иҖ…дҪҝз”ЁJavaScriptзҡ„window.matchMediaе’Ңе®ҪеәҰеҸҳеҢ–зӣ‘еҗ¬еҷЁжқҘж·»еҠ жҲ–еҲ йҷӨзұ»пјҹ - frz3993

Answer 1

我用以下 jQuery 解决了这个问题。

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

当分辨率低于768像素时，使用视口(viewport)，我将所有的轮播项设置为显示块(display block)，覆盖了Bootstrap应用的默认的display none。

发布答案是为了帮助其他遇到同样情况的人。

- DJG22

Answer 2

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

- farhan Asad

Answer 3

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

仅仅显示隐藏的幻灯片是不够的。我还需要隐藏走马灯控件。希望对某些人有所帮助。

- Usman Shaukat