How can I make the Bootstrap js carousel automatic

问题:

Using bootstrap.js version 2.02

I'm trying to get the Twitter Bootstrap Carousel to automatically cycle as soon as someone visits my site. Right now, the auto cycling works only after you click one of the cycle buttons at least once.

I want the carousel to begin cycling at the interval right away.

Does anyone know how to do this?

My site is hotairraccoon.com

You'll see how after you click the carousel once, it begins to cycle every 5 seconds or so, but I don't want the click to be required to reveal carousel content.

Thanks!

回答1:

Note: As mentioned in the comments this solution will work correctly for Bootstrap 2. Refer to MattZ's answer for instructions on how to accomplish the same behavior on Bootstrap 3.

I had the same issue as you and all I had to do to fix it was call the carousel('cycle') method after I had initialized the carousel:

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});
</script>  

I realize this question is old but I was googling tonight trying to figure it out myself and saw noone had properly answered it. Top voted answer will not automatically start the carousel, it will only cycle once a button has been pressed which is not what the OP was looking for.

回答2:

In Bootstrap 3.0, this can be accomplished by adding a 'data-ride' attribute to the carousel container:

<div id="my-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        ...
    </div>
</div>

https://github.com/twbs/bootstrap/blob/v3.0.0/js/carousel.js#L210

回答3:

$('.carousel').carousel({
  interval: 2000
})

回答4:

The jquery.js file must load before the bootstrap.js, whether they are placed in the head tags or at the end of your file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>

回答5:

In Bootstrap 3.0, this can be accomplished by adding a 'data-ride' attribute to the carousel container:

...

回答6:

Try to initialize your carousel like this:

$('.carousel').carousel().next();

回答7:

if none of those solutions work for you. try this:

$(document).ready(function () {
  function playcarousel(){
    $('.carousel-control.right').trigger('click');
  } 
  window.setInterval(playcarousel, 4000); 
});

回答8:

A quick and dirty solution is to programmatically click the button on document ready:

$(function() {
  $(".right.carousel-control").click();
});

BTW: make sure you load jQuery before the other scripts referring to $, right now you have two Uncaught ReferenceError: $ is not defined because you call $ on line 101 and 182, but jquery is first loaded on line 243.

I would recommend using a tool like firebug or developer tool (chrome/safari) to catch these errors.

EDIT: I think you already have a working solution, but because you use jquery before it's loaded it doesn't work.

回答9:

Not sure if you got this sorted out, but I was having that problem as well. I resolved it by wrapping the carousel interval setting in a function like this:

!function ($) {
$(function() {
    $('.carousel').carousel({ interval: 3000 })
});
}(window.jQuery);

回答10:

This is the solution which worked for me, based on Jesse Carter's answer to this question. I have no idea why this works, but for some reason it needs 2 calls, one inside the document dot ready and the other outside. If I remove either of them then something goes wrong, eg the pause functionality cant be made to work properly, or the automatic cycling. Further to this the interval only seems to work inside the doc.ready. Comments from javascript heads most welcome ;-) but I suspect that this area of T.B. is not entirely bug free! I'm using 2.0.2 which I know is a little bit behind ( current version now is 2.0.4) but I don't see any changes to this area

jQuery(document).ready(function () {
    jQuery('#myCarousel').carousel(
    {
    interval:2000
    });
});

jQuery('#myCarousel').carousel();

回答11:

While there undoubtedly are correct answers here, I just wanted to add that you can reproduce the exact behavior as the poster describes by adding errors to your code. Remove semicolons or the ending script tag for example, and the carousel wont autoplay anymore.

So the first thing you should do is to look for errors in your javascript console!

回答12:

The right way to fix this is to add the "active" class to the first image in the carousel while creating it. This will make the carousel start cycling as soon as possible.

Here is an example:

    <div class="carousel slide">
      <div class="carousel-inner">
        <div class="item active"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>

回答13:

Try this.

$(document).ready(function ()
{
    $('.carousel').carousel({interval:5000,pause:false});
});

回答14:

    <div id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
               <img src="img1" class="img-responsive" alt="stuff1" > 
              </div>
              <div class="item">
               <img src="img2" class="img-responsive" alt="stuff2" > 
              </div>
            </div>
           <!-- Controls-->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a> 
          </div>

 <!--This script should be at the very bottom of the page (footer works for me)-->  
    <script>
    $('#myCarousel').carousel
    ({
        interval: 2000,


        })

    </script>

回答15:

There is one more way to automatically cycle the bootstrap carousel.

use data-ride="carousel" attribute. It tells the bootstrap to begin animating the carousel immediately when the page loads.