Definir intervalo de tempo para cada item no Carousel
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?
Discussão (0)
Carregando comentários...