Search code examples
htmlcsscarouselbootstrap-carousel

show only one image in carousel slider on mobile

I have carousel slider that have 4 images in a row , In desktop and tablet screen size its okay, but in mobile i don't wanna resize my images i want to show only one item in each slide. bootstrap automatically resizes images and shows smaller items! how can i detect mobile screen size and show only one image in each slide.

My Code:

<style>
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active 
{
  background: #333333;
}
.media-carousel img
{
  width: 250px;
  height: 100px
}
</style>

  <div class="carousel slide media-carousel" id="media">
    <div class="carousel-inner">
      <div class="item  active">
        <div class="row">
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>          
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>  
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>  
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>              
        </div>
      </div>
      <div class="item">
        <div class="row">
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>         
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>  
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div> 
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
          </div>              
        </div>
      </div>
    </div>
    <a data-slide="next" href="#media" class="right carousel-control">‹</a>
    <a data-slide="prev" href="#media" class="left carousel-control">›</a>
  </div>

preview in desktop : enter image description here

preview in mobile :

enter image description here

Solution

  • It is not possible to adjust slides as per screen resolutions using bootstrap carousel you need to use external sources to make this type of difficult sliders.

    this are the reference link which helps you to make this type of slider.

    Slick Slider: https://kenwheeler.github.io/slick/