"Bootstrap Carousel with text"
Bootstrap 3.1.0 Snippet by seantyla

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

Related: See More

Argon Dashboard PRO
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
Bootstrap 4 Carousel

Questions / Comments:

Hi. I want to upload images from this form via ajax call like this:
var startUpload = function(files) {
$.ajax({
url : $(uploadForm).attr('action'),
data : {images:files},
type : 'POST',
success : function(data) {
alert(data);
}
});
};

but i have error because files is wrong serialized. Can someone help me.

Igor () - 8 years ago - Reply 0

Does someone know any tutorial or video that teachs how to use this snippet on my website and make it send those files to an email? I dont know much about backend, serverside language, etc.. Thank you in advance

Fernando Monteiro () - 8 years ago - Reply 0

Can't seem to get it to run in plunker. Am I missing something here? http://plnkr.co/edit/xykfGR...

William Olson () - 8 years ago - Reply 0

Hi max , i got the front end working , am currently using asp.net webforms , and also MVC for server side stack , am not getting both to sync up and call my serverside function

Deric () - 9 years ago - Reply 0

Hello, I entered the drag and drop in my form working perfectly, the only one that does not work is the drag and drop, drag an image if not the preleva..come do?

Marco () - 9 years ago - Reply 0

I just found a good solution to upload multiple files Hope it will be helpful. http://blog.toufika.com/fil...

Khalid Ahmed Sojib () - 9 years ago - Reply 0

I'm so new to this, where do the files get stored?

Erik Thiart () - 9 years ago - Reply 0

You would store them on your server or on S3. What server side technology are you using?

maxsurguy () - 9 years ago - Reply 0

I have dreamhost cloud server, how do i get uploads to show on my page? at the moment its all there but when i drag and drop nothing happens. Thanks in advance

Abdel H Djeebet () - 9 years ago - Reply 0

Sweet I never actually thought that far... ( Noobly moment)

Erik Thiart () - 9 years ago - Reply 0

I just wanted to know how to set the upload server/folder? I always get the error "POST" method

Mahmoud Nabeel () - 9 years ago - Reply 0

I would actually suggest you use something like http://rubaxa.github.io/jqu... to get that part figured out in most cross-browser way possible. If you want you can also get my book that has a whole chapter devoted to AJAX file uploads: http://maxoffsky.com/frontend/

maxsurguy () - 9 years ago - Reply 0

max, your links seem to not work

kevin () - 9 years ago - Reply 0

Hello! Sorry, my blog was down for a couple days, please try checking it out again at http://maxoffsky.com/frontend !

maxsurguy () - 9 years ago - Reply 0