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 cli

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

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

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 4

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