<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="Carousel" data-items="1,2,3" data-slide="1" id="ResSlid1">
<div class="Carousel-inner">
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
</div>
<button class="btn btn-primary leftLst"><</button>
<button class="btn btn-primary rightLst">></button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Change data items for xs,sm,md and lg display items respectively. Ex:data-items="1,3,5,6"</p>
<p>Change data slide for slides per click Ex:data-slide="1"</p>
</div>
</div>
</div>
.Carousel { float: left; overflow: hidden; padding:15px; width: 100%; }
.Carousel-inner { transition: 1s ease all; float: left; }
.Carousel-inner .item { float: left; border: 1px solid #ccc; text-align:center; }
.leftLst, .rightLst { margin-top:15px;}
$(document).ready(function(){
var itemsMainDiv = ('.Carousel');
var itemsDiv = ('.Carousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if(condition)
click(0,this);
else
click(1,this)
});
ResCarouselSize();
$(window).resize(function() {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize()
{
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function() {
id=id+1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id","ResSlid"+id);
if(bodyWidth>=1200)
{
incno=itemsSplit[3];
itemWidth = sampwidth/incno;
}
else if(bodyWidth>=992)
{
incno=itemsSplit[2];
itemWidth = sampwidth/incno;
}
else if(bodyWidth>=768)
{
incno=itemsSplit[1];
itemWidth = sampwidth/incno;
}
else
{
incno=itemsSplit[0];
itemWidth = sampwidth/incno;
}
$(this).css({'transform':'translateX(0px)','width':itemWidth*itemNumbers});
$(this).find(itemClass).each(function(){
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("outt");
$(".rightLst").removeClass("outt");
});
}
//this function used to move the items
function ResCarousel(e, el, s){
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el+' '+itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if(e==0){
translateXval = parseInt(xds)-parseInt(itemWidth*s);
$(el+' '+rightBtn).removeClass("outt");
if(translateXval<= itemWidth/2){
translateXval = 0;
$(el+' '+leftBtn).addClass("outt");
}
}
else if(e==1){
var itemsCondition = $(el).find(itemsDiv).width()-$(el).width();
translateXval = parseInt(xds)+parseInt(itemWidth*s);
$(el+' '+leftBtn).removeClass("outt");
if(translateXval>= itemsCondition-itemWidth/2){
translateXval = itemsCondition;
$(el+' '+rightBtn).addClass("outt");
}
}
$(el+' '+itemsDiv).css('transform','translateX('+-translateXval+'px)');
}
//It is used to get some elements from btn
function click(ell,ee){
var Parent ="#"+$(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
