"Simple Responsive Carousel"
Bootstrap 3.1.0 Snippet by lisavilleneuve

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 ---------->
<section class="section-white">
<div class="container">
<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="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</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
/* Makes images fully responsive */
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
width: 100%;
height: auto;
}
/* ------------------- Carousel Styling ------------------- */
.carousel-inner {
border-radius: 15px;
}
.carousel-caption {
background-color: rgba(0,0,0,.5);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 0 0 10px 25px;
color: #fff;
text-align: left;
}
.carousel-indicators {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 100%;
z-index: 15;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard Pro Angular
Simple Vertical timeline
Simple white navbar
BS4 clean & simple invoice template

Questions / Comments:

You need the jquery link in order for this to work. Its kinda obvious if you know what your lookin at.

Bruno Monteiro () - 7 years ago - Reply 0

Really feels good by reading your artilce. For more snippet check at www.scanfcode.com

Mohit Jain () - 7 years ago - Reply 0

Images are not sliding..i mean slider is not working properly...

zohaib khan () - 8 years ago - Reply 0

yes... images are not sliding

Juliar Nasution () - 7 years ago - Reply 0

I embed it to my Bootstrap template,
but the left & right arrow-icon always keep center.
I modify css, but not worked.

maxmas () - 8 years ago - Reply 0

Thank you! Works just fine.

Filipe () - 8 years ago - Reply 0

Absolute lifesaver.

Ricardo Tejada () - 8 years ago - Reply 0

if I have image of 400x400 what should I change?

Ivxn Sanchez () - 9 years ago - Reply 0

pretty nice

Pablo C. V. Bello () - 9 years ago - Reply 0

is it possible to insert youtube links in this snippet? thank you!

Daniel Taiar () - 9 years ago - Reply 0

This is a wonderful snippet. but you might want to make the z-index of the arrows higher than the z-index of the caption. On smaller screens the arrows fall behind them and are unusable.

mouse0270 () - 10 years ago - Reply 0