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