<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="carousel-example-generic" class="carousel slide img-responsive" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://i.annihil.us/u/prod/marvel/i/mg/6/40/54b83921efd20/standard_fantastic.jpg" alt="standard_fantastic.jpg"> <div class="carousel-caption"> Titulo 1 </div> </div> <div class="item"> <img src="http://fireandwaterpodcast.com/app/uploads/2015/11/star-wars-250x250.jpg" alt="star-wars-250x250.jpg"> <div class="carousel-caption"> Titulo 2 </div> </div> <div class="item"> <img src="http://cdn.wikimg.net/strategywiki/images/3/3f/Star_Wars_Galactic_Battlegrounds_boxart.jpg" alt="Star_Wars_Galactic_Battlegrounds_boxart.jpg"> <div class="carousel-caption"> Titulo 3 </div> </div> <div class="item"> <img src="http://sm.ign.com/t/ign_in/cover/l/lego-star-/lego-star-wars-the-force-awakens_r826.250.jpg" alt="lego-star-wars-the-force-awakens_r826.250.jp"> <div class="carousel-caption"> Titulo 4 </div> </div> <div class="item"> <img src="http://img3.rnkr-static.com/user_node_img/105/2087355/250/star-wars-episode-iv-a-new-hope-films-photo-u2.jpg" alt="star-wars-episode-iv-a-new-hope-films-photo-u2.jpg"> <div class="carousel-caption"> Titulo 5 </div> </div> <div class="item"> <img src="http://s3.evcdn.com/images/block250/I0-001/037/039/074-8.jpeg_/star-wars-destiny-leagueopen-play-74.jpeg" alt="star-wars-destiny-leagueopen-play-74.jpeg"> <div class="carousel-caption"> Titulo 6 </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

#carousel-example-generic { width: 924px; padding-left: 41px; position: absolute; left:50%; margin-left: -462px; } /* .carousel-inner { margin: auto; width: 90%; }*/ .carousel-caption { color: red; } a.right:link, a.right:hover, a.left:link, a.left:hover { background: initial; } a.left .glyphicon-chevron-left, a.right .glyphicon-chevron-right { color: red; } .item img{ display: inline!important; }

$(document).ready(function() { $('#carousel-example-generic').carousel({ interval: 10000 }); console.log('hello World'); $('#carousel-example-generic .item').each(function() { var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length > 0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } }); });