ブートストラップカルーセルの最初のスライドでの問題

Question

私は自分のサイトにブートストラップカルーセルを持っています。

<div id="myCarousel" class="hp-top carousel fade" data-ride="carousel" data-interval="6000"> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    </ol> 
    <div class="carousel-inner"> 
    <div id="first-slide" 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> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 

     <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">distinctive?</span></p> 
     </div> 
     </div> 
    </div> 
    </div> 

私はスライド移動後数秒でテキストスライドを作成する機能を作成しました：
これは短縮HTMLです。
これはコードです：

<script type="text/javascript"> 
var carouselContainer = jQuery('.carousel'); 
var slideInterval = 6000; 

jQuery(document).ready(function() { 
    if (jQuery(window).width() > 480) { 
    function toggleCaption() { 
     jQuery('.carousel-caption').hide(); 
     var caption = carouselContainer.find('.active').find('.carousel-caption'); 
     caption.delay(1000).toggle("slide", {direction:'right'}); 
    } 

    jQuery('#myCarousel').bind('slide.bs.carousel', function() { 
     jQuery('.carousel-caption').hide(); 
    }); 

    carouselContainer.on('slid.bs.carousel', function() { 
     toggleCaption(); 
    }); 
    } 
}); 
</script> 

今、すべては、しかし、あなたが最初のページをロードするとき、最後のバナーが最初のバナーショーの前に第二のために現れ、正常に動作します。
これは私の上記の機能と関係があるのだろうかと思います。
何が原因なのでしょうか？

Answer 1

ドキュメント内の条件内で関数を定義したようです。それをしないでください。

<script type="text/javascript"> 
    var carouselContainer = jQuery('.carousel'); 
    var slideInterval = 6000;    

    jQuery(document).ready(function() { 
     if (jQuery(window).width() > 480) {      

      toggleCaption(); //replace function definition with call to function instead 

      jQuery('#myCarousel').bind('slide.bs.carousel', function() { 
       jQuery('.carousel-caption').hide(); 
      }); 

      carouselContainer.on('slid.bs.carousel', function() { 
       toggleCaption(); 
      }); 
     } 
    }); 

    //MOVED function outside of document.ready: 
    function toggleCaption() { 
     jQuery('.carousel-caption').hide(); 
     var caption = carouselContainer.find('.active').find('.carousel-caption'); 
     caption.delay(1000).toggle("slide", { direction: 'right' }); 
    } 
</script>