"Carousel with Timer and Caption"
Bootstrap 3.1.0 Snippet by ckthomp

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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 class="row">
<h2>Carousel with text and transition timer.</h2>
</div>
<div class="row">
<!-- The carousel -->
<div id="transition-timer-carousel" class="carousel slide transition-timer-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#transition-timer-carousel" data-slide-to="0" class="active"></li>
<li data-target="#transition-timer-carousel" data-slide-to="1"></li>
<li data-target="#transition-timer-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400" />
<div class="carousel-caption">
<h1 class="carousel-caption-header">Slide 1</h1>
<p class="carousel-caption-text hidden-sm hidden-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim aliquet rutrum. Praesent vitae ante in nisi condimentum egestas. Aliquam.
</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x400/AAAAAA/888888" />
<div class="carousel-caption">
<h1 class="carousel-caption-header">Slide 2</h1>
<p class="carousel-caption-text hidden-sm hidden-xs">
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
.transition-timer-carousel .carousel-caption {
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 4%, rgba(0,0,0,0.5) 32%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(4%,rgba(0,0,0,0.1)), color-stop(32%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
text-align: left;
padding-top: 5px;
padding-left: 15%;
padding-right: 15%;
}
.transition-timer-carousel .carousel-caption .carousel-caption-header {
margin-top: 10px;
font-size: 24px;
}
@media (min-width: 970px) {
/* Lower the font size of the carousel caption header so that our caption
doesn't take up the full image/slide on smaller screens */
.transition-timer-carousel .carousel-caption .carousel-caption-header {
font-size: 36px;
}
}
.transition-timer-carousel .carousel-indicators {
bottom: 0px;
margin-bottom: 5px;
}
.transition-timer-carousel .carousel-control {
z-index: 11;
}
.transition-timer-carousel .transition-timer-carousel-progress-bar {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
//Events that reset and restart the timer animation when the slides change
$("#transition-timer-carousel").on("slide.bs.carousel", function(event) {
//The animate class gets removed so that it jumps straight back to 0%
$(".transition-timer-carousel-progress-bar", this)
.removeClass("animate").css("width", "0%");
}).on("slid.bs.carousel", function(event) {
//The slide transition finished, so re-add the animate class so that
//the timer bar takes time to fill up
$(".transition-timer-carousel-progress-bar", this)
.addClass("animate").css("width", "100%");
});
//Kick off the initial slide animation when the document is ready
$(".transition-timer-carousel-progress-bar", "#transition-timer-carousel")
.css("width", "100%");
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments:

how can i add circle in starting point & control slider speed ????

Gaurav Kumar () - 8 years ago - Reply 0

http://mukhtalefstudio.com/

Ali () - 8 years ago - Reply 0

hi guys!
Could you please help me?
I couldnt make the progress bar work.
Could you please give me some tips how to script the progress bar and get work properly with the slider?
Im using my own slider script.

I will appreciate any help.
Cheers!

Combo () - 9 years ago - Reply 0

How i can delay the changing speed of the slider images? i want 1min delay each slider image change.

Nishad Hasan () - 9 years ago - Reply 0

I like the slider, however, wish I was smart enough to work out adjustable delays for slides in the js - you can adjust the progress bar in the css but it does not effect the actual sliding of the slides.

Okay-dot-com () - 9 years ago - Reply 0

how to fix image to auto shrink for example 1200x600 to be uniform to 1200x400. thanks.

jhedz () - 9 years ago - Reply 0

Hi, How to change the time please ? And it's possible to change the transition, like a fade effect for example ?

PierreHubert () - 10 years ago - Reply 0

Thanks a lot but i have one issue with prev sliders, they don't any effect of slide, can you help me ?

thomas () - 10 years ago - Reply 0

they don't have* sorry

thomas () - 10 years ago - Reply 0

how can i adjust the speed of the carousel? thanks!

calvin () - 10 years ago - Reply 0

Hi, you find a solution ?

PierreHubert () - 10 years ago - Reply 0

the solutios is to add data-interval="2000" in the wrapper div like so ..
<div id="transition-timer-carousel" class="carousel slide transition-timer-carousel" data-ride="carousel" data-interval="2000">
2000 is milliseconds..

Kim () - 8 years ago - Reply 0

Is it possible to make each slide to stay a bit longer? Thanks!

Calvin () - 10 years ago - Reply 0

how to animated caption? I think if the caption just like that, it's too simple and not intresting

Achmad Aliyudin () - 10 years ago - Reply 0

I´ve the same issue about load process after 100 %. And I also usage the bootstrap verion 3.1.1. Somebady knows what is happened and how cam I fixed this? Thank you for answers.

unkrautdeluxe () - 10 years ago - Reply 0

Hi ! It takes so much time to change the slide after 100% load of the progress time ! I'm using bootstrap 3.0 though, is it because of that ?

ShuichiAy () - 10 years ago - Reply 0

Thanks for this wonderful source. However, the Glyphicon (Left and Right) arrow are missing when I previewed it from my html. Do you have any ideas what the issue is?

Calvin () - 10 years ago - Reply 0

Are you in localhost? or on a live site?

jenfree84 () - 10 years ago - Reply 0

A real smart idea.
Thanks.

Joshua () - 10 years ago - Reply 0