"Responsive Item Slider for Bootstrap 4"
Bootstrap 4.1.1 Snippet by SOJITRA

<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(); });

Related: See More


Questions / Comments:

hi very useful and itss Awesome thanks

can i have your email lz

mahnabil (1) - 4 years ago - Reply 1


Hi...

Awesome :)

Cytus (0) - 4 years ago - Reply 1