JQuery jCarouselLite plugin with fade effect

Question

Welcome all...

I want to use the fade effect with jCarouselLite qualities. Is it possible.

Needs:

• Image transition time should be fast.
• The image should remain for 10 seconds.

Can someone direct me to this please.

Gita.

Answer 1

Umm ... maybe I misunderstood what you want. But what of what you requested is not yet supported by jCarousel Lite?

• Attenuation effect: use the easing parameter (you need to enable the jQuery easing plugin ). Check out Custom Animation - Easing Demo (on the right side of the page).
• Fast transition: the speed option (milliseconds) determines how quickly the transition is animated.
• Show image for 10 seconds: auto . Thus, the carousel self-timer and the time you specify in milliseconds is the time between two consecutive slides.

---

Check out the demo: http://jsbin.com/etena/ (see code <a3> here )

Answer 2

To disappear from Image to Image, rather than Image to White to Image, you must set the speed attribute to zero, for example.

 $('#content .slider .inner') .jCarouselLite( { afterEnd : function(el) { $(el).parent().fadeTo(500, 1); }, beforeStart : function(el) { $(el).parent().fadeTo(500, 0); }, speed : 0 } ); 

Answer 3

You can not. With relief, you can only set the way in which it is a slide, but jCarousselLite will always be a slide.

Of course, you can change the default behavior for plugins to suit your specific needs. An example is here: http://snipplr.com/view/18326/jcarousellite-fade-animation/ (I did not test this, but it looked fine)

Answer 4

You cannot do this with easing. Based on / simplifying what publicJorn wrote, here is a way to add a fadeIn / FadeOut effect on shift:

 $('div#foo').jCarouselLite({ visible: 1, start: 0, beforeStart: function(a) { $(a).parent().fadeTo(500, 0); }, afterEnd: function(a) { $(a).parent().fadeTo(500, 1); } });