<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 carousel-text"> <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"> 1. Duis in feugiat risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus dapibus felis eu eros tempus, sit amet posuere tellus blandit. Suspendisse potenti. Quisque rhoncus sit amet tellus vitae... </div> <div class="item"> 2. Duis in feugiat risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus dapibus felis eu eros tempus, sit amet posuere tellus blandit. Suspendisse potenti. Quisque rhoncus sit amet tellus vitae... </div> <div class="item"> 3. Duis in feugiat risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus dapibus felis eu eros tempus, sit amet posuere tellus blandit. Suspendisse potenti. Quisque rhoncus sit amet tellus vitae... </div> <div class="item"> 4. Duis in feugiat risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus dapibus felis eu eros tempus, sit amet posuere tellus blandit. Suspendisse potenti. Quisque rhoncus sit amet tellus vitae... </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>

.carousel .item {-webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s;} .carousel .active.left {left:0;opacity:0;z-index:2;} .carousel .next {left:0;opacity:1;z-index:1;} .carousel-text .carousel-inner .item { padding: 0 40px; text-align: justify; } .carousel.slide.carousel-fade.carousel-text { width: 300px; }

$(document).ready(function(){ $('#hero-carousel').carousel({ interval: 5000, pause: false }); });