Auto-Generate Twitter Bootstap Carousel Indicators

I've recently had the privilege of setting up Bootstrap carousel within a content management system so a less technical user could add, edit and remove slides without worrying much about the HTML. On that note, it made sense to me that the carousel be smart enough to automatically add the carousel indicator dots, depending on how many items are in the carousel. I found that the following bit of jQuery before invoking the carousel works wonders.

First, I omitted the "carousel-indicators" ordered list from Bootstrap’s boilerplate HTML, entirely. (Afterall, I want that to self-generate when the page is rendered.) Presuming the rest of the HTML is in place, here’s what to add to your script before calling the carousel:

<!-- 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();