"Simple Responsive Carousel"
Bootstrap 3.1.0 Snippet by lisavilleneuve

Post to Facebook Tweet this

<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; } }

Related: See More

Vuetify Material Dashboard
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 () - 7 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 () - 7 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 () - 8 years ago - Reply 0

pretty nice

Pablo C. V. Bello () - 8 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