Home »
HTML
How to make a multi-item carousel which is also responsive across all screens?
Today we are going to learn how to make a multiple item slider? We have seen many websites with full image slider but for some ecommerce websites we require multi-item carousel. For that we will use Html, CSS, Bootstrap and JavaScript. Bootstrap used here is for making the pages responsive so that it looks good in all screen sizes whether it will be mobile, laptop etc.
Submitted by Prerna Saxena, on February 17, 2018
First of all we will make code using html,
We will declare a container-fluid that will contain our multi-item carousel. As in Bootstrap Container is a containing element that is used to wrap site elements. There are two types of container class in bootstrap-.container is used for fixed width container whereas .container-fluid is used for full size width of the viewport.
Here we are using .container. Next we will make use of Bootstrap Grid System which makes up to 12 columns. It has four classes according to different screen sizes that is xs, sm, md, lg.
We will add a class a row and inside it we will make a 12 columns class for containing our carousel. Inside that we will use how much item we want to show at once like if we want to show 3 items per slide then we will place each columns size to 4 so that 4+4+4=12.
It will have code as follows-
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12">
</div>
</div>
</div>
Now we will see how to create a carousel which helps in making items slide,
We will use a div with carousel class which contains data-ride=”carousel” which indicates that Bootstrap will start slider immediately when page loads.
<div class="carousel multi-item-carousel slide" id="myCarousel" data-ride="carousel">
</div>
The href attribute in slide indicators indicate the id of carousel and data-slide contains two values prev and next which changes slide position according to its current position.
<div id="slider-control">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<img src=" " alt="Left" class="img-responsive"></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<img src=" " alt="Right" class="img-responsive"></a>
</div>
We will also add some javascript to automatically slide all images using next() method which searches immediately following siblings of same type.
1) HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Multi-item-Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
<!--Item slider text-->
<div class="container">
<div class="row" id="slider-text">
<div class="col-md-6" >
<h2>Multi-item Carousel</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="carousel multi-item-carousel slide" id="myCarousel" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="images/img1.png" class="img-responsive center-block"></a>
<span class="badge">20%</span>
<h4 class="text-center">Red Dotted Dress</h4>
<h5 class="text-center">Rs. 500</h5>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="images/img2.png" class="img-responsive center-block"></a>
<h4 class="text-center">Magenta Floral Dress</h4>
<h5 class="text-center">Rs. 2500</h5>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="images/img3.png" class="img-responsive center-block"></a>
<span class="badge">20%</span>
<h4 class="text-center">Stylish Green shirt</h4>
<h5 class="text-center">Rs. 3000</h5>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="images/img4.png" class="img-responsive center-block"></a>
<h4 class="text-center">Red Animated Shirt</h4>
<h5 class="text-center">Rs. 1000</h5>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="images/img5.png" class="img-responsive center-block"></a>
<h4 class="text-center">Baby Pink Stylish Shirt</h4>
<h5 class="text-center">Rs. 1200</h5>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-2">
<a href="#"><img src="images/img6.png" class="img-responsive center-block"></a>
<h4 class="text-center">Blue Wedding Gown</h4>
<h5 class="text-center">Rs. 2000</h5>
</div>
</div>
</div>
<div id="slider-control">
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="https://s12.postimg.org/uj3ffq90d/arrow_left.png" alt="Left" class="img-responsive"></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="https://s12.postimg.org/djuh0gxst/arrow_right.png" alt="Right" class="img-responsive"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2) CSS file
#slider-text{
padding-top: 40px;
display: block;
text-align: center;
}
#slider-text .col-md-6{
overflow: hidden;
}
#slider-text h2 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
font-size: 30px;
letter-spacing: 3px;
margin: 30px auto;
padding-left: 40px;
}
#myCarousel h4{
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
font-size: 12px;
margin: 10px auto 3px;
}
#myCarousel h5{
font-family: 'Josefin Sans', sans-serif;
font-weight: bold;
font-size: 12px;
margin: 3px auto 2px;
}
#myCarousel h6{
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;;
font-size: 10px;
margin: 2px auto 5px;
}
.badge {
background: #b20c0c;
position: absolute;
height: 40px;
width: 40px;
border-radius: 50%;
line-height: 31px;
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
font-size: 14px;
border: 2px solid #FFF;
box-shadow: 0 0 0 1px #b20c0c;
top: 5px;
right: 25%;
}
#slider-control img{
padding-top: 60%;
margin: 0 auto;
}
@media screen and (max-width: 992px){
#slider-control img {
padding-top: 70px;
margin: 0 auto;
}
}
.multi-item-carousel .carousel-control {
width: 4%;
background-image: none;
}
.multi-item-carousel .carousel-control.left {
margin-left: 5px;
}
.multi-item-carousel .carousel-control.right {
margin-right: 5px;
}
.multi-item-carousel .cloneditem-1,
.multi-item-carousel .cloneditem-2,
.multi-item-carousel .cloneditem-3,
.multi-item-carousel .cloneditem-4,
.multi-item-carousel .cloneditem-5 {
display: none;
}
@media all and (min-width: 768px) {
.multi-item-carousel .carousel-inner > .active.left,
.multi-item-carousel .carousel-inner > .prev {
left: -50%;
}
.multi-item-carousel .carousel-inner > .active.right,
.multi-item-carousel .carousel-inner > .next {
left: 50%;
}
.multi-item-carousel .carousel-inner > .left,
.multi-item-carousel .carousel-inner > .prev.right,
.multi-item-carousel .carousel-inner > .active {
left: 0;
}
.multi-item-carousel .carousel-inner .cloneditem-1 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item.active.right,
.multi-item-carousel .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.multi-item-carousel .carousel-inner > .item.active.left,
.multi-item-carousel .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.multi-item-carousel .carousel-inner > .item.left,
.multi-item-carousel .carousel-inner > .item.prev.right,
.multi-item-carousel .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.multi-item-carousel .carousel-inner > .active.left,
.multi-item-carousel .carousel-inner > .prev {
left: -16.666%;
}
.multi-item-carousel .carousel-inner > .active.right,
.multi-item-carousel .carousel-inner > .next {
left: 16.666%;
}
.multi-item-carousel .carousel-inner > .left,
.multi-item-carousel .carousel-inner > .prev.right,
.multi-item-carousel .carousel-inner > .active {
left: 0;
}
.multi-item-carousel .carousel-inner .cloneditem-2,
.multi-item-carousel .carousel-inner .cloneditem-3,
.multi-item-carousel .carousel-inner .cloneditem-4,
.multi-item-carousel .carousel-inner .cloneditem-5,
.multi-item-carousel .carousel-inner .cloneditem-6 {
display: block;
}
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item.active.right,
.multi-item-carousel .carousel-inner > .item.next {
-webkit-transform: translate3d(16.666%, 0, 0);
transform: translate3d(16.666%, 0, 0);
left: 0;
}
.multi-item-carousel .carousel-inner > .item.active.left,
.multi-item-carousel .carousel-inner > .item.prev {
-webkit-transform: translate3d(-16.666%, 0, 0);
transform: translate3d(-16.666%, 0, 0);
left: 0;
}
.multi-item-carousel .carousel-inner > .item.left,
.multi-item-carousel .carousel-inner > .item.prev.right,
.multi-item-carousel .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
3) Javascript file
<script type="text/javascript">
$(document).ready(function(){
$('#myCarousel').carousel({ interval: 3000 });
$('.multi-item-carousel .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<6;i++) {
itemToClone = itemToClone.next();
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
});
</script>
Output
