Home »
HTML
Create Responsive Multi-Item Carousel
By IncludeHelp Last updated : October 13, 2024
First of all we will make code using html,
Container Setup
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.
Adding Class for Row
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.
Code
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,
Creating a carousel
We will use a div with carousel class which contains data-ride=”carousel” which indicates that Bootstrap will start slider immediately when page loads.
Code
<div class="carousel multi-item-carousel slide" id="myCarousel" data-ride="carousel">
</div>
Image source and data slide
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.
Code
<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.
Complete Code to Create Responsive Multi-Item Carousel
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
$(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));
}
});
});
Output
