間隔を複数回設定してクリアする

Question

私のスライダの最初のスライドには、ある間隔内で変化するテキストがあります。 これは、これを行うにはjQueryのです：

<script> 
    var x = 0; 
    var text = ["STRATEGICALLY", "COST-EFFECTIVELY", "EFFICIENTLY", "EXCEPTIONALLY"]; 
var counter = 0; 
var elem = document.getElementById("banner-change"); 

var intervalID = setInterval(change, 1500); 

function change() { 

    jQuery(elem).fadeOut('slow', function() { 
    jQuery(elem).text(text[counter++]); 

    if (counter >= text.length) { 
     counter = 0; 
    } 

    jQuery(elem).fadeIn('fast'); 

     if (++x === 5) { 
     window.clearInterval(intervalID); 
    } 
    }); 

} 

    </script> 

スライダはこのような何か（短縮コード）になりますので、<span id="banner-change" class="slider-green">の単語が変化し続ける

<div id="myCarousel" class="hp-top carousel fade" data-ride="carousel" data-interval="6000"> 
<div class="carousel-inner"> 
<div class="item active"><img src="" alt="Chicago"/><div class="carousel-caption"> 
<div class="carousel-caption-inner"> 
<p class="slider-text small"><span class="slider-padding">What makes</span> us <span class="slider-green">specialists?</span></p> 
<p class="slider-text">We just do ip</p> 
<p class="slider-text"><span id="banner-change" class="slider-green">exceptionally</span></p> 
</div> 
</div> 
</div> 

を。これは正常に動作します。ただし、最初のバナーが初めて表示される場合にのみ動作します。各単語が一度しか表示されないので、最初のバナーがそれを再び開始することを示すたびに、これを行う方法がわからないので、間隔をクリアしているので意味がありますか？

Answer 1

カルーセルレベルを使用してトリガーアクションを実行できます。 e.relatedTargetは、スライドに表示されているスライドを参照します。 それに一意のIDを付けると、それを識別して後で何らかのアクションを実行できます。

$('#myCarousel').on('slide.bs.carousel', function (e) { 
    if (e.relatedTarget.id === 'firstSlide') // do something 
})