Bootstrap Carousel Not Automatically Sliding

Question

I'm using bootstrap by Twitter's carousel (latest version) and I've got it working - except that it doesn't begin to automatically slide. It works well after you've clicked one of the navigation buttons . Not sure why it's doing this.

Here's my JS setup in the header:

    <script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/jquery.js'; ?>"></script>

<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-carousel.js'; ?>"></script>
<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-transition.js'; ?>"></script>

And the HTML:

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">

    <div class="active item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>


    <div class="item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

Also just added this to no avail:

<script>
$('#myCarousel').carousel({
    interval: 1200
});
</script>

After making the above change, the javascript console says:

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

Any thoughts on why this wouldn't be working?

Answer 1

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

If it still is not working, look for potential errors in the browser's (firebug/chrome..) console.

---

For

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

Make sure:

Only one jQuery is included

Only one bootstrap-carousel.js or bootstrap.js is included.

jQuery is included first, then bootstrap-carousel.js or bootstrap.js, then $(document).ready( ...

Answer 2

Sometimes using the wrong version of JQuery can effect the actions of the Twitters Boostrap carousel. They are currently running v1.7.1, if your using different it may be causing the errors.

If your not running v1.7.1 you can download it from here:

http://code.jquery.com/jquery-1.7.1.min.js

Also make sure that your code is wrapped in a document ready :

  $(document).ready(function () {
      // code here
  });

Answer 3

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

Sometimes you need to put the JavaScript file after the carousal. Actually before the end of the page.

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

Happy coding. Thanks

Answer 4

 <script language="javascript" type="text/javascript">
 $(window).load(function() 
 {       
     $("#slideshow > div:gt(0)").hide();
     setInterval(function() { 
       $('#slideshow > div:first')
       .fadeOut(750)
       .next()
       .fadeIn(1000)
       .end()
       .appendTo('#slideshow');
                            },  11000);
  });
</script>

Answer 5

If you are using NgRoute and the above solutions didn't work for you, be sure to include the following javascript code on the very top of the template NgRoute injects into the <ng-view></ng-view> :

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

Also ensure that jQuery is included first before bootstrap.js is included. This helped me when I had this problem on my project.