Bootstrap - defina um intervalo diferente para cada item do carrossel [duplicado]
Esta pergunta já tem uma resposta aqui:
uração do slide diferente para cada item no carrossel de inicialização 3 4 respostasOlá, eu tenho um carrossel no Bootstrap e o que eu gostaria de fazer é definir cada item para um intervalo diferente, então basicamente o primeiro item pode ter uma duração de 10 segundos, o segundo 5 segundos, o terceiro 3 segundos, etc. ..
Portanto, decidi usar um atributo de dados como este
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" data-interval="8000">
<img src="carousel/icon_1.jpg" />
<div class="carousel-caption">
<h2 class="carousel-title">Welcome to My Site</h2>
<p class="carousel-text">Lorem ipsum dolor sit amet</p>
<p class="carousel-text">Lorem ipsum dolor sit amet</p>
</div>
</div><!-- /.item -->
<div class="item" data-interval="4000">
<img src="carousel/icon_2.jpg" />
<div class="carousel-caption">Lorem ipsum dolor sit amet</div>
</div><!-- /.item -->
<div class="item" data-interval="4000">
<img src="carousel/icon_3.jpg" />
<div class="carousel-caption">Lorem ipsum dolor sit amet</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
</div> <!-- Carousel -->
<script type="text/javascript">
$(document).ready(function () {
// more scripts here ...
// the main part
var t;
var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);
$('#myCarousel').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration = $(this).find('.active').attr('data-interval');
$('#myCarousel').carousel('pause');
t = setTimeout("$('#myCarousel').carousel();", duration-1000);
});
});
</script>
No caso, talvez seja necessário alterar um intervalo de tempo no futuro. O problema é que todos os slides aplicam o mesmo intervalo (cerca de 2 ou 1 segundo). Como posso consertar isso