Execute function on image change with carouFredSel

Question

This seems to be pretty basic but i can't find anything on the topic, i tried looking the Advanced Documentation and here but nothing.

I need to execute a callback when the carousel changes the image to do some DOM manipulation. is there a way to do that?

Answer 1

You should try this:

$(document).ready(function() {
$("#caroufredsel-6").carouFredSel({
responsive  : true,
items       : 3,
width: '100%',
height: 'auto',
  scroll: {
        duration: 1000,
        timeoutDuration: 3000,
  onBefore : function( data ) {
       console.log("Transition");
       //alert("Transition");
  }
}
});

});

Working Fiddle: http://jsfiddle.net/robertrozas/PwCJb/

Answer 2

There is an onAfter Attribute

onAfter : function(oldItems, newItems) {
    ...
}

Answer 3

Doesn't scroll.onAfter do just that?

Function that will be called right after the carousel finished scrolling.
This function receives the same parameter as the onBefore-callback function.