Simple Responsive Carousel
<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>
<!-- 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>
</div>
</section>
/* 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;
margin: 0;
padding: 0 25px 25px 0;
text-align: right;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
/* ------------------- Section Styling - Not needed for carousel styling ------------------- */
.section-white {
padding: 10px 0;
}
.section-white {
background-color: #fff;
color: #555;
}
@media screen and (min-width: 768px) {
.section-white {
padding: 1.5em 0;
}
}
@media screen and (min-width: 992px) {
.container {
max-width: 930px;
}
}
You need the jquery link in order for this to work. Its kinda obvious if you know what your lookin at.,Really feels good by reading your artilce. For more snippet check at www.scanfcode.com,Images are not sliding..i mean slider is not working properly…,yes… images are not sliding,I embed it to my Bootstrap template, but the left & right arrow-icon always keep center. I modify css, but not worked.,Thank you! Works just fine.,Absolute lifesaver.,if I have image of 400×400 what should I change?,pretty nice,is it possible to insert youtube links in this snippet? thank you!,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.,The author is lisavilleneuve

Loading...