Bootstrap carousel 如何在 xs 大小的滑块中隐藏一项？

Question

How I can hide one or two items from the bootstrap-carousel only on xs-size ?

When I added class 'hidden-xs' to this item in carousel and item div looks like:

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

All the items and the carousel disappeared.

The same problem exist when i add 'hidden-xs' class to img element for this item.

How can I fix that ? I want to hide on xs only one or two slides. Others must by visible.

My code looks like:

<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

I can't think of a way to do it just with bootstrap helper classes, because the carousel script depends on the .item class. But you could use the following jQuery:

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

You just have to add the class .hide-on-mobile to the items you want to hide on mobile devices.

Working Example

Answer 2

Expanding on Sebsemillia's approach, you can achieve this conditional logic actively on the window resize event. The only catch is that if the element has class "active", you must also remove this class and add it to another slide without the .hide-on-mobile class. See here, using class .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

Or you can use CSS media query to hide the items you choose on mobile:

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

You just need to add class="slide-hide-on-mobile" to the items you want to hide:

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