Reputation: 231
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 mobile :
Upvotes: 3
Views: 6404
Reputation: 3031
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/
Upvotes: 3