"Fullscreen Background Carousel"
Bootstrap 3.0.3 Snippet by sevenx.de

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 id="background-carousel"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active" style="background-image:url(http://placehold.it/1600x800/)"></div> <div class="item" style="background-image:url(http://placehold.it/1600x800/)"></div> <div class="item" style="background-image:url(http://placehold.it/1600x800/)"></div> </div> </div> </div> <div id="content-wrapper"> <!-- PAGE CONTENT --> <div class="container"> <div class="page-header"><h3>Fullscreen Background Carousel</h3></div> <div class="well"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br><a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p> </div><!-- End Well --> </div><!-- End Container --> <!-- PAGE CONTENT --> </div>
html,body { height:100%; width:100%; position:relative; } #background-carousel{ position:fixed; width:100%; height:100%; z-index:-1; } .carousel, .carousel-inner { width:100%; height:100%; z-index:0; overflow:hidden; } .item { width:100%; height:100%; background-position:center center; background-size:cover; z-index:0; } #content-wrapper { position:absolute; z-index:1 !important; min-width:100%; min-height:100%; } .well { opacity:0.85 }
$('#myCarousel').carousel({ pause: 'none' })

Related: See More


Questions / Comments:

hi can anywone tell me how to put a link in the item, thank's

slouma () - 8 years ago - Reply 0


Nice carousel! I've got one question with it. All content inside div content-wrapper becomes not-responsive. Am I doing something wrong? Thanks!

Erik () - 10 years ago - Reply 0


hey can anyone tell me how to stop the cycle of the slider i want a slider with the click on next or previous button

xulqarnain () - 10 years ago - Reply 0


Nice Job, I was intending to do something similar, to put it in the head of the page

ShadowMaster971 () - 10 years ago - Reply 0