Question

I am using jCarousel for image slider. I am new to jQuery so from the jCarousel documentation I can’t figure out how to apply different animation effects.

Say I have one image at a slice, and I want the view image disappear slowly, and simultaneously the next picture appear in the same place. How can I achieve this effect? Is it a custom animation, that requires to write a new JS function, or it can be done via setting of jCarousel?

Answer 1

Karine, I believe you should use the easing configuration property. http://sorgalla.com/projects/jcarousel/#Configuration

Here you can specify the jquery easing effect you want to use (http://api.jquery.com/animate/). If you need something else you can create a custom animation. Here you can see an example http://sorgalla.com/projects/jcarousel/examples/special_easing.html.

Alternatively, you can obtain the desired effect using this code:

<script type="text/javascript">
function carouselFadeOut(carousel) {
  var clipId = carousel.clip.context.id;
  $('#' + clipId).fadeOut();
}

function carouselFadeIn(carousel) {
  var clipId = carousel.clip.context.id;
  $('#' + clipId).fadeIn();
}


jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({visible : 1, scroll : 1, 

    itemLoadCallback: {
      onBeforeAnimation: carouselFadeOut,
      onAfterAnimation: carouselFadeIn
    }
  });
});

Hope it helps, Fabrizio