Hybreeder Hybreeder - 5 months ago 11
HTML Question

How to hide bootstrap slider and all image should be display vertically on mobile device?

Is there any way to hide bootstrap slider and all images in slider should be displayed in vertically on the mobile device?
I have 5 images in the slider and I have to display all image vertically on a mobile device.I tried in media query below code but it's not working.Please help me in this.

#myCarousel.carousel-inner > .item
{
display: block !important;
}

Answer

I've created this solution for a similar problem. Please check is it what you want to achieve?

var isCarouselPaused = false;

$( window ).on( 'load resize', function() {
  if ( document.documentElement.clientWidth <= 767 ) {
    if ( !isCarouselPaused ) {
      $( '#myCarousel' ).carousel('pause');
      isCarouselPaused = true;
    }
  } else {
      if ( isCarouselPaused ) {
      $( '#myCarousel' ).carousel('cycle');
      isCarouselPaused = false;
    }
};
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner img {
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .carousel .item {
    display: block;
    margin-top: 12px;
  }
  .carousel-control, 
  .carousel-indicators {
    display: none;
  }
}
<div class="container">
  <div class="row">
    <div class="col-xs-12">
    
      <h1>Header</h1>
      
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="https://placehold.it/900x300/c69/f9c/?text=1" alt="First slide">
            <div class="carousel-caption">
              <h3>First Header</h3>
              <p>Text text text text text text text.</p>
            </div>
          </div>
          <div class="item">
            <img src="https://placehold.it/900x300/9c6/cf9/?text=2" alt="Second slide">
            <div class="carousel-caption">
              <h3>Second Header</h3>
              <p>Text text text text text text text.</p>
            </div>
          </div>
          <div class="item">
            <img src="https://placehold.it/900x300/69c/9cf/?text=3" alt="Third slide">
            <div class="carousel-caption">
              <h3>Third Header</h3>
              <p>Text text text text text text text.</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
      </div>
      
      <h2>Text after the carousel</h2>
      
    </div> 
  </div> 
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>