Bootstrap API轮播连续 [英] Bootstrap API Carousel Continuous

问题描述

我一直在使用Bootstrap API，我一直在旋转木马上工作。我想让一对夫妇的图像以恒定的运动在页面上漂移，下一张图片从右边开始，在页面上缓慢移动，当页面离开页面时，从右边开始下一张图片。我不想让图像永远停止。我试图使用一些选项，如 interval ， pause 和 wrap 但无效。有没有办法使用默认转盘来实现这一点？

I've been working with the Bootstrap API and I've been working on the carousel. I want to have a couple images "drift" across the page in a constant motion, with the next image starting on the right and move slowly across the page, when that one is off the page, start the next one from the right. I do not want the image to ever stop. I've tried to use some of the options such as interval, pause, and wrap but to no avail. Is there a way to achieve this with the default carousel?

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

推荐答案

您可以覆盖Bootstrap的CSS，过渡而不是缓入。您还可以将其持续时间从0.6s更改为任何您想要的。显然，转换越长/越慢的秒数越多。您还需要将间隔设置为1，以便轮播不会停留在任何图像上。

You can override Bootstrap's CSS so that it uses a linear transition instead of an ease-in-out. You can also change its duration from 0.6s to whatever you want. Obviously the more seconds the longer/slower the transitions will be. You will also want to make your interval 1 so that the carousel does not stop on any image.

此处演示

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

这篇关于Bootstrap API轮播连续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！