Bootstrap carousel how to hide one item from slider on xs size?

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