"slider"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="header-carousel" class="carousel slide" data-ride="header-carousel-ride"> <div class="carousel-inner"> <div class="item" style="background-image: url('https://www.invisioncommunity.co.uk/wp-content/uploads/2014/01/Need-for-Speed-Rivals-Screenshot-05.jpg');"> <div class="title">Need for Speed</div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt purus eget justo dignissim euismod. Donec non quam commodo, consequat orci nec...</div> <div class="more">Read More</div> </div> <div class="item" style="background-image: url('http://www.tmcheats.com/wordpress/wp-content/uploads/2013/09/battlefield_4_china_rising-wide.jpg');"> <div class="title">Battle Field</div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt purus eget justo dignissim euismod. Donec non quam commodo, consequat orci nec...</div> <div class="more">Read More</div> </div> <div class="item" style="background-image: url('http://img1.wikia.nocookie.net/__cb20130918230846/diablo/es/images/f/f9/Diablo-3-wallpaper.jpg');"> <div class="title">Diablo</div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt purus eget justo dignissim euismod. Donec non quam commodo, consequat orci nec...</div> <div class="more">Read More</div> </div> <div class="item" style="background-image: url('https://2ch.hk/mc/src/174372/1406368696794.jpg');"> <div class="title">Minecraft</div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt purus eget justo dignissim euismod. Donec non quam commodo, consequat orci nec...</div> <div class="more">Read More</div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#header-carousel" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-3x"></i> </a> <a class="right carousel-control" href="#header-carousel" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-3x"></i> </a> </div>
body { font-family: "Arial"; color: #fff; } #header-carousel .carousel-inner .item { background-size: cover; background-position: center; width: 100%; height: 400px; } .carousel-control i { margin-top: 170px; } .slide { background: #dadada; width: 100%; height: 400px; } .title { font-size: 50px; font-weight: bold; text-align: center; opacity: 0; text-shadow: 0px 3px 1px rgba(0,0,0,0.7); position: absolute; width: 100%; top: 0; } .text { max-width: 540px; margin: 0 auto; padding-top: 175px; opacity: 0; text-shadow: 0px 1px 1px rgba(0,0,0,1.0); } .more { background: #e2393e; font-weight: bold; width: 200px; text-align: center; line-height: 4; -webkit-box-shadow: 0px 3px 0px 0px #932427; -moz-box-shadow: 0px 3px 0px 0px #932427; box-shadow: 0px 3px 0px 0px #932427; position: absolute; bottom: 0; left: calc(50% - 100px); opacity: 0; cursor: pointer; -webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .more:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-bottom: -3px; } .slide, .title, .text { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
$(window).load(function(){ $('.title').css({ 'top': 90+'px', 'opacity': 1 }); $('.text').css({ 'opacity': 1 }); $('.more').css({ 'opacity': 1, 'bottom': 90+'px' }); }); $('#header-carousel').on('slid.bs.carousel', function () { $('.title').css({ 'top': 90+'px', 'opacity': 1 }); $('.text').css({ 'opacity': 1 }); $('.more').css({ 'opacity': 1, 'bottom': 90+'px' }); }); $('#header-carousel').on('slide.bs.carousel', function () { $('.title').css({ 'top': 0+'px', 'opacity': 0 }); $('.text').css({ 'opacity': 0 }); $('.more').css({ 'opacity': 0, 'bottom': 0+'px' }); }); function carouselFix() { $(".carousel.slide").carousel("pause"); $('.carousel.slide .item').removeClass('active'); $('.carousel.slide').find('.item:first').addClass('active'); } $(document).ready(function() { carouselFix(); });

Related: See More


Questions / Comments: