"Item Slider - Responsive"
Bootstrap 3.3.0 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/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="spe-cor">
<div class="container">
<h4 class="title">Special Correspondent</h4>
<div id="spe-cor" class="carousel carousel-correspondence slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Himanshu Daudia">
<div class="caption">
<h3><a href="https://www.facebook.com/himanshu.daudia" target="_blank">Himanshu Daudia</a></h3>
<p class="cate-para">
<a href="#" class="cate">Front End</a>
<a href="#" class="cate">HTML</a>
<a href="#" class="cate">CSS</a>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail row">
<img src="https://images.unsplash.com/photo-1548372290-8d01b6c8e78c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Hiren Sojitra">
<div class="caption">
<h3><a href="https://www.facebook.com/SOJITRAHIREN/" target="_blank">Hiren Sojitra</a></h3>
<p class="cate-para">
<a href="#" class="cate">Photoshop</a>
<a href="#" class="cate">Bootstrap</a>
<a href="#" class="cate">jQuery</a>
</p>
</div>
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
@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');
/*Special Corresponds*/
.spe-cor {
position: relative;
background: #FFF;
}
.spe-cor .carousel-correspondence [class*="cloneditem-"] {
display: none;
}
.spe-cor .carousel-inner {
margin-bottom: 20px;
}
.spe-cor h4.title {
padding-top: 25px;
padding-bottom: 10px;
}
.spe-cor .thumbnail img {
border: 1px solid #DDD;
}
.spe-cor .thumbnail {
margin-bottom: 0;
border-radius: 0;
padding: 10px;
height: auto;
position: relative;
border: none;
overflow: hidden;
}
.spe-cor .thumbnail:hover, .spe-cor .thumbnail:active, .spe-cor .thumbnail:focus {
background: #FFF;
}
.spe-cor .thumbnail:after {
content: '';
background: #005fb1;
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
/*Correspondence Slider*/
$('.carousel-correspondence .item').each(function() {
var itemToClone = $(this);
for (var i = 1; i < 6; i++) {
itemToClone = itemToClone.next();
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
itemToClone.children(':first-child').clone()
.addClass("cloneditem-" + (i))
.appendTo($(this));
}
});
/*Correspondence Slider*/
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: