Bootstrap輪播間隔更改

我有一個使用bootstrap輪播的網站。這裏是我的代碼：Bootstrap輪播間隔更改

<div id="slider"> 
    <div id="carousel-bounding-box"> 
    <div class="carousel slide" id="myCarousel"> 
     <div class="carousel-inner"> 
       <?php 
    if ($images = get_field('images', $design_id)) { 
    foreach ($images as $key => $image) { 
     $active = $key == 0 ? 'active' : ''; 
     echo 'item" data-interval="1000">'; 
     echo '<img src="' . $image['image']['sizes']['large'] . '" />'; 
     echo '</div>';      } 
    } 
?> 

     </div> 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span>          
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span>          
      </a>         
     </div> 
    </div> 
</div>

這裏是我的jQuery：

jQuery(document).ready(function($) { 

    $('#myCarousel').carousel({ 
      interval: 1000 
    }); 

    $('#carousel-text').html($('#slide-content-0').html()); 

    //Handles the carousel thumbnails 
    $('[id^=carousel-selector-]').click(function(){ 
      var id_selector = $(this).attr("id"); 
      var id = id_selector.substr(id_selector.length -1); 
      var id = parseInt(id); 
      $('#myCarousel').carousel(id); 
    }); 


    // When the carousel slides, auto update the text 
    $('#myCarousel').on('slid.bs.carousel', function (e) { 
      var id = $('.item.active').data('slide-number'); 
      $('#carousel-text').html($('#slide-content-'+id).html()); 
    }); 

     (function($) { 
    fakewaffle.responsiveTabs(['xs', 'sm']); 
}); 

});

我改變區間：5000區間：1000，因爲有一個延遲當滑塊會顯示物品的頁面加載時。由於將間隔時間更改爲1000，因此滑塊可以完美快速地加載，但現在需要減慢滑塊項目的速度，因爲它們之間的滑塊間隔太快。

我認爲問題是直到時間間隔之後纔會將「活動」狀態提供給幻燈片/圖像。如何在頁面加載時自動爲第一個幻燈片項目的上述代碼添加活動狀態，而不是等到間隔後再等待？

任何幫助，將不勝感激

來源

2014-11-04 user3615681

你不能回聲內部回聲使用，看起來像一個PHP錯誤。 – 2014-11-04 20:59:06

感謝您指出，將正確:-) – user3615681 2014-11-04 21:03:23

如何將其更換回來，並使用窗口加載，而不是文檔準備好：http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/ - 你可以試試它。 – Christina 2014-11-04 21:13:25

這裏是我用來解決這個問題的代碼：

jQuery(document).ready(function($) { 

    $('#myCarousel').carousel({ 
      interval: 3000 
    }); 

    $('#myCarousel .item:first').addClass('active'); 
});

來源

2014-11-04 23:07:55 user3615681

Bootstrap輪播間隔更改

回答

相關問題