nickberens360
3/9/2015 - 3:46 PM

Bootstrap: dynamically add carousel indicators

Bootstrap: dynamically add carousel indicators

USE PHP VERSION HERE:


jQuery( document ).ready(function( $ ) {
	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='#carousel-example-generic' data-slide-to='"+index+"' class='active'></li>") : 
			indicators.append("<li data-target='#carousel-example-generic' data-slide-to='"+index+"'></li>");
	});   
});

//Add number navigation
jQuery( document ).ready(function( $ ) {
	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='#carousel-example-generic' data-slide-to='"+index+"' class='active'>"+(index+1)+"</li>") : 
			indicators.append("<li data-target='#carousel-example-generic' data-slide-to='"+index+"'>"+(index+1)+"</li>");
	});   
});