Bootstrap API Carousel Continu

Question

J'ai travaillé avec l'API Bootstrap et j'ai travaillé sur le carrousel. Je veux que quelques images "dérivent" sur la page dans un mouvement constant, avec l'image suivante commençant à droite et se déplaçant lentement sur la page, quand celle-ci est hors de la page, commence la suivante à partir de la droite. Je ne veux pas que l'image s'arrête jamais. J'ai essayé d'utiliser certaines des options telles que interval, pause, et wrap mais en vain. Y a-t-il un moyen d'y parvenir avec le carrousel par défaut?

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

Vous pouvez remplacer le CSS de Bootstrap pour qu'il utilise une transition linéaire au lieu d'une facilité en sortie. Vous pouvez également changer sa durée de 0,6s à tout ce que vous voulez. Évidemment, plus les secondes sont longues, plus les transitions seront longues. Vous voudrez aussi faire votre intervalle 1 pour que le carrousel ne s'arrête sur aucune image.

Demo here

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