Definir intervalo de tempo para cada item no Carousel

[michelmfreitas 1]

Olá pessoal,

 

tenho um carousel (bootstrap) no meu site e gostaria de definir um intervalo de tempo para cada um de seus elementos.

 

Minha lógica: definir um atributo "data-interval" com o tempo desejado e recuperar isso via JS, aplicando no evento nativo do bootstrap para cada troca de slide.

var t;
var start = $('#destaque-principal.carousel .item:first').attr('data-interval');
t = setTimeout("$('#destaque-principal.carousel').carousel({interval: 1000});", start-1000);
$('#destaque-principal.carousel').on('slid.bs.carousel', function () {   
	clearTimeout(t);
	var duration = $(this).find('.active').attr('data-interval');
	$('#destaque-principal.carousel').carousel('pause');
	t = setTimeout("$('#destaque-principal.carousel').carousel();", duration-1000);
})

$('.carousel-indicators li').on('click', function(){
	clearTimeout(t);   
});

Porém, ele aplica o mesmo timer em todos, não funcionando o código acima. Sabem me dizer onde está meu erro?