Bootstrap旋轉木馬的第一張幻燈片的問題

Question

我的網站上有一個引導旋轉木馬。
這是縮短的HTML：

<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> 

我創建了一個功能，使在幾秒鐘的文本幻燈片後幻燈片中移動。
這是代碼：

<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

看起來您已經在doc中準備好了一個條件內的函數。不要這樣做。移動它的文檔準備這樣的範圍：

<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>