"Bootstrap 4 Item Slider Full Responsive"
Bootstrap 4.0.0 Snippet by SOJITRA

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 *** --> <style type="text/css" id="slider-css"></style> <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" role="listbox"> <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://dummyimage.com/1200x800/03658c/dddddd&text=Item+1" 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://dummyimage.com/1200x800/0e7373/dddddd&text=Item+2" 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://dummyimage.com/1200x800/265902/dddddd&text=Item+3" 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://dummyimage.com/1200x800/592512/dddddd&text=Item+4" 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://dummyimage.com/1200x800/d93d04/dddddd&text=Item+5" 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://dummyimage.com/1200x800/bf1a0b/dddddd&text=Item+6" 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-4"> <img class="d-block img-fluid" src="https://dummyimage.com/1200x800/bf1a0b/dddddd&text=Item+1" alt="First slide"> </div> </div> <div class="carousel-item"> <div class="col-md-3 col-sm-4 col-4"> <img class="d-block img-fluid" src="https://dummyimage.com/1200x800/010101/dddddd&text=Item+2" alt="First slide"> </div> </div> <div class="carousel-item"> <div class="col-md-3 col-sm-4 col-4"> <img class="d-block img-fluid" src="https://dummyimage.com/1200x800/F5F5F5/dddddd&text=Item+3" alt="First slide"> </div> </div> <div class="carousel-item"> <div class="col-md-3 col-sm-4 col-4"> <img class="d-block img-fluid" src="https://dummyimage.com/1200x800/15bfbf/DDDDDD&text=Item+4" alt="Second slide"> </div> </div> <div class="carousel-item"> <div class="col-md-3 col-sm-4 col-4"> <img class="d-block img-fluid" src="https://dummyimage.com/1200x800/2d730d/dddddd&text=Item+5" alt="Third slide"> </div> </div> <div class="carousel-item"> <div class="col-md-3 col-sm-4 col-4"> <img class="d-block img-fluid" src="https://dummyimage.com/1200x800/44a617/dddddd&text=Item+6" 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-item > div { float: left; } .carousel-by-item [class*="cloneditem-"] { display: none; }
function GetUnique(e){var l=[],s=temp_c=[],t=["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"];$(e).each(function(){for(var l=$(e+" > div").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]);return l}function setcss(e,l,s){for(var t=["","","","","",""],c=d=f=g=0,r=[1200,992,768,567,0],a="",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]}}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 {-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!=r[n]&&(a="@media all and (min-width: "+r[n]+"px) and (transform-3d), all and (min-width:"+r[n]+"px) and (-webkit-transform-3d) {"+a+"}"),$("#slider-css").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))})} //Use Different Slider IDs for multiple slider $(document).ready(function() { var item = '#slider-1 .carousel-item'; var item_inner = "#slider-1 .carousel-inner"; classes = GetUnique(item); setcss(classes, item, item_inner); var item_1 = '#slider-2 .carousel-item'; var item_inner_1 = "#slider-2 .carousel-inner"; classes = GetUnique(item_1); setcss(classes, item_1, item_inner_1); });

Related: See More


Questions / Comments:

thanks man , this code help me

BBEDERRAR (2) - 11 months ago - Reply 2


Please give your suggestions at hirensojitra007@gmail.com

SOJITRA (2) - 11 months ago - Reply 1


I glad!

SOJITRA (2) - 11 months ago - Reply 1


how to slide with swip finger

ajitqspl () - 1 year ago - Reply 0