Reset Twiiter bootstrap carousel when scrolls of page

Question

Does anyone know if there is a way to reset twitter bootstrap carousel when it is no longer visible?

I have it on the top of the page with three slides, is there a way to slide it back to the first one when the users scrolls down to the rest of the page?

Thank you in advance

Answer 1

You should probably optimize the code a bit but this should get you started:

var getPageScroll = function(document_el, window_el) {
      var xScroll = 0, yScroll = 0;
      if (window_el.pageYOffset !== undefined) {
        yScroll = window_el.pageYOffset;
        xScroll = window_el.pageXOffset;
      } else if (document_el.documentElement !== undefined && document_el.documentElement.scrollTop) {
        yScroll = document_el.documentElement.scrollTop;
        xScroll = document_el.documentElement.scrollLeft;
      } else if (document_el.body !== undefined) {// all other Explorers
        yScroll = document_el.body.scrollTop;
        xScroll = document_el.body.scrollLeft;
      }
      return [xScroll,yScroll];
    };

    $(window).scroll(function(e) {
        var top = $('#carousel-example-generic').offset().top;
        if(top < getPageScroll(document,window)[1]) $('#carousel-example-generic').carousel(0);
    });

Answer 2

In the carousel documentation you have this:

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

So if you want to get back to the first element, all you have to do is to use this: $('#myCarousel').carousel(0);