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

user6930268 Published at Dev

user6930268

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;
   }

Gleb Kemarsky

Bootstrap Carousel on mobile devices

The carousel becomes paused.
The images display vertically.
Each caption is placed under its image. (You can remove the code for the .carousel-caption class if you don't need this feature.)

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

For Bootstrap 4: https://codepen.io/glebkema/pen/ExxKXZb
For Bootstrap 3: https://codepen.io/glebkema/pen/rLwAWp

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');

@media (max-width: 767px) {
  .carousel .item {
    display: block;
    margin-top: 12px;
  }
  .carousel-control, 
  .carousel-indicators {
    display: none;
  }
  
  /* Place captions under their slides */
  .carousel-caption {
    color: black;
    position: static;
    text-align: left;
    text-shadow: none;
  }
  
  /* Decorations */  
  .carousel-caption h3 {
    font-weight: bold;
    margin-top: 4px;
    margin-bottom: 8px;
  }
}

/* Make the images wide and responsive. */
.carousel-inner img {
  height: auto;
  width: 100%;
}

/* Decorations */  
.carousel {
  margin-bottom: 20px;
  margin-top: 20px;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">
    
      <h1>Bootstrap Carousel on mobile devices</h1>
      
      <p>On the narrow screen the carousel is paused and the items display vertically.</p>
      
      <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>
      
    </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>

Collected from the Internet

Please contact [email protected] to delete if infringement.