"Bootstrap Carousel with text"
Bootstrap 3.1.0 Snippet by danielyewright

<div class="container"> <div class="row"> <!-- Carousel --> <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://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to <strong>LOREM IPSUM</strong></span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> <div class="item"> <img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Second slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to LOREM IPSUM</span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> <div class="item"> <img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Third slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to LOREM IPSUM</span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </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 --> </div> </div>
.container { margin-top: 20px; } /* Carousel Styles */ .carousel-indicators .active { background-color: #2980b9; } .carousel-inner img { width: 100%; max-height: 460px } .carousel-control { width: 0; } .carousel-control.left, .carousel-control.right { opacity: 1; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none; } .carousel-control.left span { padding: 15px; } .carousel-control.right span { padding: 15px; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { position: absolute; top: 45%; z-index: 5; display: inline-block; } .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { left: 0; } .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { right: 0; } .carousel-control.left span, .carousel-control.right span { background-color: #000; } .carousel-control.left span:hover, .carousel-control.right span:hover { opacity: .7; filter: alpha(opacity=70); } /* Carousel Header Styles */ .header-text { position: absolute; top: 20%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #fff; } .header-text h2 { font-size: 40px; } .header-text h2 span { background-color: #2980b9; padding: 10px; } .header-text h3 span { background-color: #000; padding: 15px; } .btn-min-block { min-width: 170px; line-height: 26px; } .btn-theme { color: #fff; background-color: transparent; border: 2px solid #fff; margin-right: 15px; } .btn-theme:hover { color: #000; background-color: #fff; border-color: #fff; }

Similar snippets: See More


Comments:

Aml Mansor 2014-05-17 21:09:43
    previous and next controls not working on firefox
Dark Eye 2014-07-02 17:57:40
    Working for me ;) on Firefox & Linux
Ankur Saini 2014-07-18 11:13:50
    not working in IE9 and IE8 properly..
John 2014-10-28 03:17:10
    How do you adjust the speed of the auto scroll?
Calvin 2015-01-15 19:01:12
    is it possible to adjust the speed of the slide transaction? Thanks!
Kent 2015-03-19 06:02:44
    how can i add this element? will i add both the html and the css codes? or can i add only the HTML one .. thanks
Sarah Holmes 2015-04-03 19:20:03
    I am trying to figure out how to get this to work like they did at: http://floorstores.com/
Protocore Hosting 2015-04-17 15:44:31
    <script>
$('.carousel').carousel({
interval: 3000
})
</script>
Kasun 2015-08-23 01:36:20
    works, thanks
Der Volksfreund 2016-07-24 21:32:52
    Doesn't work.

Commenting will be back soon.