Twitter Bootstrap Carousel not automatically starting

Question

I have a carousel on my site that was created with Twitter Bootstrap. I'm not sure why it does not start automatically though when the page loads, it does not initiate until you click on the arrow to advance to the next slide, then the timer kicks in. From the bootstrap documentation it says it can be initialised with this object, but where do i put this?

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

My site has two javascript files, jquery-1.7.2.min.js, and bootstrap.min.js.

Answer 1

Assuming you have everything else in place, try adding this before the closing body tag:

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

Answer 2

I had your same problem and found the solution; As we both put the javascripts at the end of the page, the calling of the function must be put after them:

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script type="text/javascript">
  var $ = jQuery.noConflict();
  $(document).ready(function() { 
      $('#myCarousel').carousel({ interval: 3000, cycle: true });
  }); 
</script>

http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

Answer 3

Thought I would add something about bootstrap 3 working in angular.

Depending on how extensive your application is within Angular, there could be a slight delay in when the carousel loads. For instance, I have the carousel loading as a template, which loads slightly after the document loads, so therefore, I had to add a slight timeout for the code to kick start the carousel.

        <div class="mWeb-container" ng-controller="mWebCtrl">
        <div ng-include="nav_tpl" ng-hide="print_layout"></div>
        <div ng-include="carousel_tpl" ng-hide="print_layout"></div>
        <div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div>
        <div ng-view=""></div>
        <div ng-include="comments_tpl" ng-hide="print_layout"></div>
        <div ng-include="footer_tpl" ng-hide="print_layout"></div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            var mCarouselTO = setTimeout(function(){
            $('#Carousel').carousel({
                interval: 3000,
                cycle: true,
            }).trigger('slide');
            }, 2000);
            var q = mCarouselTO;
        });
    -->
    </script>