"Static Background text slider"
Bootstrap 3.3.0 Snippet by mwaeez

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Snippets</title> <!-- ********************* ----BOOTSTRAP CSS---- ********************* --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- ********************* ----CUSTOM STYLES---- ********************* --> <style> .bg-image{ background-image: url(https://images.unsplash.com/photo-1493515322954-4fa727e97985?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f103c0c9fb5f9c704f4ad3324d1028b7&auto=format&fit=crop&w=1350&q=80); height: 100vh; width: 100vw; background-position: center center; background-size: cover; } div#myCarousel { width: 100vw; height: 100vh; } .sliderContent { width: 100vw; height: 100vh; margin: 0px !important; padding: 0px !important; position: relative !important; }.sliderContent h1 { margin: 0px !important; font-size: 4em; color: #fff; text-shadow: 2px 4px 7px #000; text-transform: uppercase; background: #00000061; padding: 10px 25px !important; margin-bottom: 14px !important; }.sliderContent>.mk-this-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }.sliderContent p { color: #fff; font-size: 2.5em; text-shadow: -2px -2px 4px #000; background: #fe0000b0; padding: 10px 41px; } </style> </head> <body> <!-- ************** ----SLIDER---- ************** --> <section class="bg-image"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="sliderContent"> <div class="mk-this-center"> <h1>Slide 1</h1> <p>Lorem ipsum dolor sit amet,</p> </div> </div> </div> <div class="item"> <div class="sliderContent"> <div class="mk-this-center"> <h1>Slide 2</h1> <p>Lorem ipsum dolor sit amet,</p> </div> </div> </div> <div class="item"> <div class="sliderContent"> <div class="mk-this-center"> <h1>Slide 3</h1> <p>Lorem ipsum dolor sit amet,</p> </div> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </section> <!-- ************** ----JQUERY---- ************** --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- ******************** ----BOOTSTRAP JS---- ******************** --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>

Related: See More

Paper Kit Pro
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
Client or Partners Logo Slider

Questions / Comments: