Bootstrap carousel 如何在 xs 大小的滑塊中隱藏一項？

Question

如何僅在 xs-size 上從 bootstrap-carousel 中隱藏一兩個項目？

當我在 carousel 和 item div 中向這個項目添加類“hidden-xs”時，它看起來像：

<div class="item hidden-xs">
      <img src="imgTop2.jpg" alt="...">
</div>

所有的物品和旋轉木馬都消失了。

當我將 'hidden-xs' 類添加到該項目的 img 元素時，存在同樣的問題。

我該如何解決？ 我只想在 xs 上隱藏一兩張幻燈片。 其他人必須通過可見。

我的代碼看起來像：

<div id="carousel-top" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="hidden carousel-indicators" style="display:none">
      <li data-target="#carousel-top" data-slide-to="0" class="active"></li>
      <li class="" data-target="#carousel-top" data-slide-to="1"></li>
      <li class="" data-target="#carousel-top" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
      <img src="imgTop.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop2.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop3.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop4.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop5.jpg" alt="...">
    </div>


    </div>

    <!-- Controls -->
    <a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Answer 1

我想不出只使用引導助手類的方法，因為輪播腳本依賴於.item類。 但是您可以使用以下 jQuery：

if ($(window).width() < 960) {
     $('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide');
}

您只需將.hide-on-mobile類添加到要在移動設備上隱藏的項目。

工作示例

Answer 2

擴展 Sebsemillia 的方法，您可以在窗口調整大小事件上主動實現此條件邏輯。 唯一的問題是，如果元素具有“active”類，您還必須刪除此類並將其添加到另一個沒有.hide-on-mobile類的幻燈片中。 看到這里，使用類.no-mobile --

 $(function(){ var $window = $(window); function deviceWidth() { return $window.width(); } function toggleMobileSlideVisibility(show_hide) { $no_mobile_slides = $('.carousel-inner').find('.no-mobile'); if (show_hide === 'hide'){ var reset_active_slide = false; $no_mobile_slides.each(function(i, e){ if ($(e).hasClass('active')) { reset_active_slide = true; $(e).removeClass('active'); } }); $no_mobile_slides.removeClass('item').addClass('hide'); if (reset_active_slide) { $('.carousel-inner').find('.item').first().addClass('active'); } } else if (show_hide === 'show') { $no_mobile_slides.addClass('item').removeClass('hide'); } } var is_mobile_device = false; var detectMobile = function detectMobile(){ if (deviceWidth() > 978) { if (is_mobile_device) { toggleMobileSlideVisibility('show'); } is_mobile_device = false; } else { if (!is_mobile_device) { toggleMobileSlideVisibility('hide'); } is_mobile_device = true; } } $(window).on('resize', function(){ detectMobile(); }); detectMobile(); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://unsplash.it/1920/600/?random&img=2" alt="random"> <div class="carousel-caption"> Just A Slide </div> </div> <div class="item no-mobile"> <img src="https://unsplash.it/1920/600/?random&img=3" alt="random-no-mobile"> <div class="carousel-caption"> A Slide That Should Hide On Mobile </div> </div> <div class="item"> <img src="https://unsplash.it/1920/600/?random&img=4" alt="random2"> <div class="carousel-caption"> Just Another Slide </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

Answer 3

或者您可以使用 CSS 媒體查詢來隱藏您在移動設備上選擇的項目：

@media screen and (max-device-width: 800px) {
  .slide-hide-on-mobile { display: none; }
}

您只需要將 class="slide-hide-on-mobile" 添加到要隱藏的項目中：

<div class="item active slide-hide-on-mobile">
  <img src="imgTop.jpg" alt="...">
</div>