Bootstrap API Carousel Continuous

Question

我一直在使用Bootstrap API，並且一直在研究傳送帶。我希望有一對圖像在整個頁面上「漂移」，並以下一個圖像從右側開始，然後在頁面上緩慢移動，當頁面離開頁面時，從右側開始下一個圖像。我不想讓圖像永遠停下來。我嘗試過使用一些選項，如interval,pause和wrap，但無濟於事。有沒有辦法通過默認輪播來實現這一點？

<!-- Carousel --> 
     <div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation --> 
      <div class="carousel-inner"> 
       <div class="text-center item active"><!-- class of active since it's the first item --> 
        <img src="<?php realpath($_SERVER["DOCUMENT_ROOT"]); ?>/public_html/img/phone_slide.png" alt="" /> 
       </div> 
       <div class="item"> 
        <img src="<?php realpath($_SERVER["DOCUMENT_ROOT"]); ?>/public_html/img/phone_slide.png" alt="" /> 
       </div> 
      </div><!-- /.carousel-inner --> 
     </div> 
<!-- /Carousel --> 

<script> 
    $(document).ready(function(){ 
    $('.carousel').carousel({interval: 500}); 
    }); 
</script> 

Answer 1

您可以覆蓋Bootstrap的CSS，以便它使用線性轉換而不是緩入。您也可以將其持續時間從0.6秒改爲任何你想要的。很顯然，轉換越長/越慢，秒越多。您還需要設置間隔1，以便旋轉木馬不會停留在任何圖像上。

Demo here

.carousel-inner > .item { 
    -webkit-transition: 5s linear left; 
    -moz-transition: 5s linear left; 
    -o-transition: 5s linear left; 
    transition: 5s linear left; 
}