<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="contai-ner"> <div class="col-sm-9"> <div id="hero-wrapper"> <div class="carousel-wrapper"> <div id="hero-carousel" class="carousel slide carousel-fade"> <ol class="carousel-indicators"> <li data-target="#hero-carousel" data-slide-to="0" class="active"></li> <li data-target="#hero-carousel" data-slide-to="1"></li> <li data-target="#hero-carousel" data-slide-to="2"></li> <li data-target="#hero-carousel" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="http://placekitten.com/1200/500"> </div> <div class="item"> <img src="http://placekitten.com/1170/500"> </div> <div class="item"> <img src="http://placekitten.com/1100/500"> </div> <div class="item"> <img src="http://placekitten.com/1170/600"> </div> </div> <a class="left carousel-control" href="#hero-carousel" data-slide="prev"> <i class="fa fa-chevron-left left"></i> </a> <a class="right carousel-control" href="#hero-carousel" data-slide="next"> <i class="fa fa-chevron-right right"></i> </a> </div> </div> </div> </div> </div>

img{width:100%} .carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;} .carousel .active.left {left:0;opacity:0;z-index:2;} .carousel .next {left:0;opacity:1;z-index:1;}

$('.carousel').carousel({ interval: 3000, pause: false })