hammer.js + Css Bootstrap carousel: Set autoplay

Question

Hi I have created a swipeable slider based on Hammer.js and Bootstrap css. I cannot get the autoplay function to work! I added a class of active to my first "li", as explained on the css bootstrap website, I added a class to the carousel of ".carousel", and tried adding this at the top of my script below the html content of my body:

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

I tried it with and without a document ready function, neither worked.

You can see all the scripts here, let me know if you would like to see a JS fiddle.

http://archibaldbutler.com/projects/PA-consulting/

Answer 1

Here is a solution. Your carousel library doesn't support autoplaying, so something quick and dirty like this will be good enough to get you started:

var currentPane = 0;
setTimeout(playSlides, 2000);
function playSlides() {
    currentPane = currentPane + 1;
    if ( currentPane > 5 ) {
        currentPane = 0;
        carousel.showPane(0);
    } else {
        carousel.next();
    }

    setTimeout(playSlides,2000);
}

Answer 2

There is no such thing as jQuery.fn.carousel in your code (on your site), therefore this wont work.

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