Skip to content
5 Bootstrap carousel examples to use in your projects
In This Tutorial
Bootstrap Carousel
The carousel.js is a plug-in in the Bootstrap Framework for sliding images like a carousel in your web pages, especially landing or home page. This is quite common these days and very effective way of the marketing to present the core products or services or special offers related to the website in a slideshow just below the top navigation bar.
The Twitter Bootstrap Carousel plugin not only allows to give the slideshow of images like carousel but also you can include headings or captions for sliding images.
Note: If you intend to use just carousel by using the Bootstrap framework then you should include carousel.js file to your web page. Otherwise, you can include the whole library or JavaScript i.e. bootstrap.js or the minified bootstrap.min.js. For our examples below, we will include Bootstrap framework from CDN as a minified file.
An example of creating a slideshow with Bootstrap carousel
Following example creates a slideshow of three images that are related to our tutorials website. You can use the “carousel” class in the main div for carousel with the “slide” class. If you do not use the “slide” class the image transition will be like a sudden effect. See both examples below:
Example of carousel class with slide class
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modal</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>carousel example</h1>
<!–carousel section starts here –>
<div id=“carousel-example-generic” class=“carousel slide” data-ride=“carousel”>
<!– Wrapper for slides –>
<div class=“carousel-inner”>
<div class=“item active”>
<img src=“images/CSS-logo.png” alt=“…”>
</div>
<div class=“item”>
<img src=“images/jquery-logo.png” alt=“…”>
</div>
<div class=“item”>
<img src=“images/java-logo.png” alt=“…”>
</div>
</div>
<!– Controls –>
<a class=“left carousel-control” href=“#carousel-example-generic” data-slide=“prev”>
<span class=“glyphicon glyphicon-chevron-left”></span>
</a>
<a class=“right carousel-control” href=“#carousel-example-generic” data-slide=“next”>
<span class=“glyphicon glyphicon-chevron-right”></span>
</a>
</div>
<!–carousel section ends here –>
</div>
</body>
</html>
|
Example of carousel class without slide class
Same example as above but without slide class in the main carousel div with id= carousel-example-generic.
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modal</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>carousel example</h1>
<!–carousel section starts here –>
<div id=“carousel-example-generic” class=“carousel” data-ride=“carousel”>
<!– Wrapper for slides –>
<div class=“carousel-inner”>
<div class=“item active”>
<img src=“images/CSS-logo.png” alt=“…”>
</div>
<div class=“item”>
<img src=“images/jquery-logo.png” alt=“…”>
</div>
<div class=“item”>
<img src=“images/java-logo.png” alt=“…”>
</div>
</div>
<!– Controls –>
<a class=“left carousel-control” href=“#carousel-example-generic” data-slide=“prev”>
<span class=“glyphicon glyphicon-chevron-left”></span>
</a>
<a class=“right carousel-control” href=“#carousel-example-generic” data-slide=“next”>
<span class=“glyphicon glyphicon-chevron-right”></span>
</a>
</div>
<!–carousel section ends here –>
</div>
</body>
</html>
|
As you can see in the second example, the images in the slideshow are changing in jerk or sudden way. Also, we used the carousel-control class with the left and right option, that adds controls to move images by clicking left or right arrows. See the control section in the example.
Note: As such Bootstrap uses CSS3 for animations so these are not compatible with IE 8 or 9. You should use this only if you are not targeting IE 8 and 9 visitors.
Adding captions to carousel Bootstrap example
You can add descriptions and links to slideshow images by using “carousel-caption” class under the images. We are adding headings by using <h1> tag and <p> tag below with a button. See the example by clicking the link below:
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<!DOCTYPE html>
<html>
<head>
<title>Carousel</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>carousel example</h1>
<!–carousel section starts here –>
<div id=“carousel-example-generic” class=“carousel slide” data-ride=“carousel”>
<!– Indicators –>
<ol class=“carousel-indicators”>
<li data-target=“#carousel-example-generic” data-slide-to=“0” class=“active”></li>
<li data-target=“#carousel-example-generic” data-slide-to=“1”></li>
<li data-target=“#carousel-example-generic” data-slide-to=“2”></li>
</ol>
<!– Wrapper for slides –>
<div class=“carousel-inner”>
<div class=“item active”>
<img src=“images/CSS-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>CSS Tutorial</h1>
<p><button >Go to CSS Tutorial</p>
</div>
</div>
<div class=“item”>
<img src=“images/jquery-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>Write less Do More</h1>
<p><button>Go to jQuery tutorial</p>
</div>
</div>
<div class=“item”>
<img src=“images/java-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>Java Tutorial</h1>
<p><button>Go to Java Tutorial</p>
</div>
</div>
</div>
<!– Controls –>
<a class=“left carousel-control” href=“#carousel-example-generic” data-slide=“prev”>
<span class=“glyphicon glyphicon-chevron-left”></span>
</a>
<a class=“right carousel-control” href=“#carousel-example-generic” data-slide=“next”>
<span></span>
</a>
</div>
<!–carousel section ends here –>
</div>
</body>
</html>
|
Setting interval for slideshow example
Following example shows how to set the interval for slideshow images in the carousel. We will set the interval in JavaScript/jQuery as the web page loads. The default value is 5000 milliseconds. We set 2000 millisecond value for this example.
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html>
<html>
<head>
<title>Carousel</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
$(‘#carousel-example-generic’).carousel({
interval: 2000
})
});
</script>
</head>
<body>
<div>
<h1>carousel example</h1>
<!–carousel section starts here –>
<div id=“carousel-example-generic” class=“carousel slide” data-ride=“carousel”>
<!– Indicators –>
<ol class=“carousel-indicators”>
<li data-target=“#carousel-example-generic” data-slide-to=“0” class=“active”></li>
<li data-target=“#carousel-example-generic” data-slide-to=“1”></li>
<li data-target=“#carousel-example-generic” data-slide-to=“2”></li>
</ol>
<!– Wrapper for slides –>
<div class=“carousel-inner”>
<div class=“item active”>
<img src=“images/CSS-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>CSS Tutorial</h1>
<p><button >Go to CSS Tutorial</p>
</div>
</div>
<div class=“item”>
<img src=“images/jquery-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>Write less Do More</h1>
<p><button>Go to jQuery tutorial</p>
</div>
</div>
<div class=“item”>
<img src=“images/java-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>Java Tutorial</h1>
<p><button>Go to Java Tutorial</p>
</div>
</div>
</div>
<!– Controls –>
<a class=“left carousel-control” href=“#carousel-example-generic” data-slide=“prev”>
<span class=“glyphicon glyphicon-chevron-left”></span>
</a>
<a class=“right carousel-control” href=“#carousel-example-generic” data-slide=“next”>
<span class=“glyphicon glyphicon-chevron-right”></span>
</a>
</div>
<!–carousel section ends here –>
</div>
</body>
</html>
|
Start, pause, next, previous controls in carousel example
Following example shows different methods of the carousel. A few buttons are added at the bottom of sliding images that you can press to see moving to Next slide, previous slide, Start, pause and slide number.
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
<!DOCTYPE html>
<html>
<head>
<title>Carousel</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script>
$(function(){
// Initializes the carousel
$(“.start-slide”).click(function(){
$(“#carousel-example-generic”).carousel(‘cycle’);
});
// Stops the carousel
$(“.pause-slide”).click(function(){
$(“#carousel-example-generic”).carousel(‘pause’);
});
// Cycles to the previous item
$(“.prev-slide”).click(function(){
$(“#carousel-example-generic”).carousel(‘prev’);
});
// Cycles to the next item
$(“.next-slide”).click(function(){
$(“#carousel-example-generic”).carousel(‘next’);
});
// Cycles the carousel to a particular frame
$(“.slide-one”).click(function(){
$(“#carousel-example-generic”).carousel(0);
});
$(“.slide-two”).click(function(){
$(“#carousel-example-generic”).carousel(1);
});
$(“.slide-three”).click(function(){
$(“#carousel-example-generic”).carousel(2);
});
});
</script>
</head>
<body>
<div>
<h1>carousel example</h1>
<!–carousel section starts here –>
<div id=“carousel-example-generic” class=“carousel slide” data-ride=“carousel”>
<!– Indicators –>
<ol class=“carousel-indicators”>
<li data-target=“#carousel-example-generic” data-slide-to=“0” class=“active”></li>
<li data-target=“#carousel-example-generic” data-slide-to=“1”></li>
<li data-target=“#carousel-example-generic” data-slide-to=“2”></li>
</ol>
<!– Wrapper for slides –>
<div class=“carousel-inner”>
<div class=“item active”>
<img src=“images/CSS-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>CSS Tutorial</h1>
<p><button >Go to CSS Tutorial</p>
</div>
</div>
<div class=“item”>
<img src=“images/jquery-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>Write less Do More</h1>
<p><button>Go to jQuery tutorial</p>
</div>
</div>
<div class=“item”>
<img src=“images/java-logo.png” alt=“…”>
<div class=“carousel-caption”>
<h1>Java Tutorial</h1>
<p><button>Go to Java Tutorial</p>
</div>
</div>
</div>
<!– Controls –>
<a class=“left carousel-control” href=“#carousel-example-generic” data-slide=“prev”>
<span class=“glyphicon glyphicon-chevron-left”></span>
</a>
<a class=“right carousel-control” href=“#carousel-example-generic” data-slide=“next”>
<span class=“glyphicon glyphicon-chevron-right”></span>
</a>
<!– Controls buttons –>
<div style=“text-align:center;”>
<input type=“button” value=“Start”>
<input type=“button” value=“Pause”>
<input type=“button” value=“Previous”>
<input type=“button” value=“Next”>
<input type=“button” value=“Move 1”>
<input type=“button” value=“Move 2”>
<input type=“button” value=“Move 3”>
</div>
</div>
<!–carousel section ends here –>
</div>
</body>
</html>
|
Useful: Bootstrap Tutorial | Bootstrap Table | Bootstrap and CSS | Forms in Bootstrap
Leave A Comment?