<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="spe-cor">
<div class="container">
<h2>Responsive Slider <small>[Just Use Normal Slider Code and Get Full Responsive Slider]</small></h2>
<div class="row">
<div id="slider-1" class="carousel carousel-by-item slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-md-3 col-sm-4 col-4">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1564359916269-08ddfdf543ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="First slide">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-md-3 col-sm-4 col-4">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="First slide">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-md-3 col-sm-4 col-4">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1515984977862-1c7201ef324d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MTB8MTk1NjQ5Nnx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="First slide">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-md-3 col-sm-4 col-4">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1564423531399-89ed4c4e3ddb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Second slide">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-md-3 col-sm-4 col-4">
<img class="d-block img-fluid" src="https://images.unsplash.com/flagged/photo-1564373020761-b9e8ab5c03b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Third slide">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-md-3 col-sm-4 col-4">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1564410267845-ae5acf1ce8d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Third slide">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slider-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slider-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="spe-cor">
<div class="container">
<p>Please give your suggetion at <a href="mailto:hirensojitra007@gmail.com">hirensojitra007@gmail.com</a></p>
<div class="row">
<div id="slider-2" class="carousel carousel-by-item slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-3 col-sm-4 col-12">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1564410267845-ae5acf1ce8d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="First slide">
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-4 col-12">
<img class="d-block img-fluid" src="https://images.unsplash.com/flagged/photo-1564373020761-b9e8ab5c03b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="First slide">
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-4 col-12">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1564423531399-89ed4c4e3ddb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="First slide">
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-4 col-12">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1515984977862-1c7201ef324d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MTB8MTk1NjQ5Nnx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="Second slide">
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-4 col-12">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Third slide">
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-4 col-12">
<img class="d-block img-fluid" src="https://images.unsplash.com/photo-1564359916269-08ddfdf543ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Third slide">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slider-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slider-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<h4>Developed By <a href="http://www.hirensojitra.com" target="_blank">Hiren Sojitra</a></h4>
</div>
</div>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/*================================================*/
@import url('https://fonts.googleapis.com/css?family=Roboto');
.carousel{
width: 100%;
}
.carousel-item > div {
float: left;
}
.carousel-by-item [class*="cloneditem-"] {
display: none;
}
var mainFunction = function(options) {
var vars = {
id: '',
bootsGrid: ["col-md-1", "col-md-2", "col-md-3", "col-md-4", "col-md-6", "col-md-12", "col-sm-1", "col-sm-2", "col-sm-3", "col-sm-4", "col-sm-6", "col-sm-12", "col-lg-1", "col-lg-2", "col-lg-3", "col-lg-4", "col-lg-6", "col-lg-12", "col-xs-1", "col-xs-2", "col-xs-3", "col-xs-4", "col-xs-6", "col-xs-12", "col-xl-1", "col-xl-2", "col-xl-3", "col-xl-4", "col-xl-6", "col-xl-12"],
breakPoint : [1200, 992, 768, 567, 0]
}
var root = this;
construct = function(v, options) {
$.extend(v, options);
}
this.GetUnique = function(e) {
var l = [],
s = temp_c = [],
t = vars.bootsGrid;
$(e).find('.carousel-item').each(function() {
for (var l = $(this).find('div').first().attr("class").split(/\s+/), t = 0; t < l.length; t++) s.push(l[t])
});
for (var c = 0; c < s.length; c++) temp_c = s[c].split("-"), 2 == temp_c.length && (temp_c.push(""), temp_c[2] = temp_c[1], temp_c[1] = "xs", s[c] = temp_c.join("-")), -1 == $.inArray(s[c], l) && $.inArray(s[c], t) && l.push(s[c]);
setcss(l, '#' + vars.id + ' .carousel-item', '#' + vars.id + ' .carousel-inner')
return l
}
setcss = function(e, l, s) {
var t = [];
$.each(vars.breakPoint,function(i,e){
t.push("");
})
for (var c = d = f = g = 0, o = [], a = 0; a < e.length; a++) {
var i = e[a].split("-");
if (3 == i.length) {
switch (i[1]) {
case "xl":
d = 0;
break;
case "lg":
d = 1;
break;
case "md":
d = 2;
break;
case "sm":
d = 3;
break;
case "xs":
d = 4
}
t[d] = i[2]
}
}
var slider = document.getElementById(vars.id);
var style = document.createElement("STYLE");
slider.insertBefore(style, slider.childNodes[0]).id=vars.id+'-style';
var style = $("#"+vars.id+'-style');
for (var n = 0; n < t.length; n++)
if ("" !== t[n]) {
if (0 === c && (c = 12 / t[n]),
f = 12 / t[n],
g = 100 / f,
a = s + " > .carousel-item.active.carousel-item-right," + s + " > .carousel-item.carousel-item-next {-ms-transform: translate3d(" + g + "%, 0, 0);-o-transform: translate3d(" + g + "%, 0, 0);-moz-transform: translate3d(" + g + "%, 0, 0);-webkit-transform: translate3d(" + g + "%, 0, 0);transform: translate3d(" + g + ", 0, 0);left: 0;}" + s + " > .carousel-item.active.carousel-item-left," + s + " > .carousel-item.carousel-item-prev {-webkit-transform: translate3d(-" + g + "%, 0, 0);transform: translate3d(-" + g + "%, 0, 0);left: 0;}" + s + " > .carousel-item.carousel-item-left, " + s + " > .carousel-item.carousel-item-prev.carousel-item-right, " + s + " > .carousel-item.active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);left: 0;}", f > 1) {
for (k = 0; k < f - 1; k++) {
o.push(l + " .cloneditem-" + k);
}
o.length && (a = a + o.join(",") + "{display: block;}"), o = []
}
0 !== vars.breakPoint[n] && (a = "@media all and (min-width: " + vars.breakPoint[n] + "px){" + a + "}"),
style.prepend(a)
}
$(l).each(function() {
for (var e = $(this), l = 0; l < c - 1; l++) {
(e = e.next()).length || (e = $(this).siblings(":first")), e.children(":first-child").clone().addClass("cloneditem-" + l).appendTo($(this))
}
})
}
construct(vars, options);
}
$.fn.responsiveCarousel = function(option) {
$(this).each(function() {
var _root = this;
option = { id: $(this).attr('id') }
var main = new mainFunction(option);
main.GetUnique(_root);
})
};
//Use Different Slider IDs for multiple slider
$(document).ready(function() {
$('#slider-1').responsiveCarousel();
$('#slider-2').responsiveCarousel();
});
