"AShish-custom-v-slider"
Bootstrap 3.0.0 Snippet by ashishk9868

Post to Facebook Tweet this

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ---------->
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="middle_bar">·</div>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/760x400/cccccc/ffffff">
<div class="carousel-caption">
<h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/760x400/999999/cccccc">
<div class="carousel-caption">
<h4><a href="#">consetetur sadipscing elitr, sed diam nonumy eirmod</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/760x400/dddddd/333333">
<div class="carousel-caption">
<h4><a href="#">tempor invidunt ut labore et dolore</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
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
body { padding-top: 50px; }
.carousel .middle_bar{
position: absolute;
background: #eee;
right: 0;
left: 0;
z-index: 50;
}
#myCarousel .carousel-caption {
left:0;
right:0;
bottom:0;
text-align:left;
padding:10px;
background:rgba(0,0,0,0.6);
text-shadow:none;
}
#myCarousel .list-group-item{background: transparent;border: none;}
#myCarousel .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus{
color: #000 !important;
font-weight: bold !important;
text-shadow: 1px 1px #f60;
}
#myCarousel #carousel-controls-group{z-index: 200}
#myCarousel .carousel-inner{z-index: 500}
#myCarousel .list-group {
position:absolute;
top:0;
right:0;
z-index: 190;
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
$(document).ready(function () {
var middle_bar = $('.carousel .middle_bar');
var controls_group = $('#myCarousel .carousel-controls-group');
var total_controls = controls_group.find("li").length;
var middle_control_index = parseInt(total_controls / 2);
var controls_group_li_height = controls_group.find("li")[0].clientHeight;
var setUpMiddleBar = function () {
middle_bar.height(controls_group_li_height);
middle_bar.css("top", controls_group_li_height * middle_control_index);
}
setUpMiddleBar();
var clickEvent = false;
$('#myCarousel').carousel({
interval: 4000
}).on('slid.bs.carousel', function (e) {
if (!clickEvent) {
var count = total_controls;
var first = controls_group.find('li').first();
first.slideUp("slow", function () {
$(this).clone().appendTo('.list-group');
controls_group.find('li').show();
$(this).remove();
controls_group.find("li").removeClass("active");
controls_group.find("li").eq(middle_control_index).addClass("active");
//update indexes
// set last to 0
});
}
clickEvent = false;
});
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard
Client or Partners Logo Slider
Custom Navbar Bootstrap 4
Timely Login slider

Questions / Comments: