HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/12006196_871333922960032_6467738435395255683_n.jpg?oh=42fba127aee2723869f582c22a95ced4&oe=592BE933" 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://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-1/p160x160/16114839_1187985094588252_4488136853110433860_n.jpg?oh=f8fcb163a33ef0ad0fa282cd96d6f3ff&oe=593D0246" 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-radius: 50%;
  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;
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

"Item Slider - Responsive"
Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Item Slider - Responsive" Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Item Slider - Responsive"
Bootstrap 3.3.0 Snippet by ASDAFF