"Thumbnail Carousel Dinamic"
Bootstrap 2.3.2 Snippet by xrozix

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="container"> <div class="row"> <div class="span12"> <div class="well"> <div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner" id="myfeed"> </div><!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div><!--/myCarousel--> </div><!--/well--> </div> </div> </div>
/* Removes the default 20px margin and creates some padding space for the indicators and controls */ .carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } /* Reposition the controls slightly */ .carousel-control { left: -12px; } .carousel-control.right { right: -12px; } /* Changes the position of the indicators */ .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the colour of the indicators */ .carousel-indicators li { background: #c0c0c0; } .carousel-indicators .active { background: #333333; }
$(document).ready(function() { var cantidadDesaparecidos = 15; var itemsxpagina = 4; var items = cantidadDesaparecidos / itemsxpagina; var resto = cantidadDesaparecidos % itemsxpagina; //alert(items.toFixed(0)); //alert(resto); for(i = 0; i < items; i++){ //console.log(i); $("#myfeed").append('<div class="item"><div class="row-fluid" id="'+i+'">'); for(j = 0; j < itemsxpagina; j++){ //console.log(j); $('#'+i).append('<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>'); } $("#myfeed").append('</div></div>'); } if(resto > 0){ $(".carousel-inner").append('<div class="item"><div class="row-fluid" id="resto">'); for(x = 0; x < resto; x++){ $("#resto").append('<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>'); } $(".carousel-inner").append('</div></div>'); } $('.item:first').addClass('active'); /*-------------------------------------------------------- slider dinamico------------------------------------------------------------*/ $('#myCarousel').carousel({ interval: 10000 }); });

Related: See More


Questions / Comments: