Gerar automaticamente indicadores de carrossel de bootstap do Twitter

Recentemente, tive o privilégio de configurar o carrossel Bootstrap em um sistema de gerenciamento de conteúdo para que um usuário menos técnico pudesse adicionar, editar e remover slides sem se preocupar muito com o HTML. Nessa nota, fazia sentido para mim que o carrossel fosse inteligente o suficiente para adicionar automaticamente os pontos indicadores do carrossel, dependendo de quantos itens estão no carrossel. Descobri que o seguinte bit de jQuery antes de invocar o carrossel faz maravilhas.

Primeiro, omiti totalmente a lista ordenada de “indicadores de carrossel” do HTML padrão do Bootstrap . (Afinal, quero que seja gerado automaticamente quando a página for renderizada.) Presumindo que o restante do HTML esteja no lugar, eis o que adicionar ao seu script antes de chamar o carrossel:

<!-- auto-generate carousel indicator html -->
var myCarousel = $(".carousel");
myCarousel.append("<ol class='carousel-indicators'></ol>");
var indicators = $(".carousel-indicators"); 
myCarousel.find(".carousel-inner").children(".item").each(function(index) {
    (index === 0) ? 
    indicators.append("<li data-target='#myCarousel' data-slide-to='"+index+"' class='active'></li>") : 
    indicators.append("<li data-target='#myCarousel' data-slide-to='"+index+"'></li>");
});     

<!-- then call carousel -->
$('.carousel').carousel();