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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
@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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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