javascript - Bootstrap API 轮播连续

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