CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapcarousel
Trevor Hutto
Trevor Hutto

Reputation: 2142

Bootstrap API Carousel Continuous

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>

Upvotes: 1

Views: 5204

Answers (1)

Tricky12
Tricky12

Reputation: 6822

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.

Demo here

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

Upvotes: 3

Related Questions