JQuery jCarouselLite plugin with fade effect

Greetings to all...

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

Needs:

1. The image transition time should be fast.
2. Image has to stay for 10 seconds.

Can anyone guid开发者_运维知识库 me for this please.

Geetha.

---

To fade from "Image to Image" rather than "Image to White to Image" you should set the speed attribute to zero, e.g.

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

---

Umm... maybe I misunderstand what you want. But what of the things you requested isn't already supported by jCarousel Lite?

• Fade effect: Use the easing option (You need to include the jQuery easing plugin). Check the Custom Animation - Easing Demo (on the right side of the page)
• Fast transition: speed option (milliseconds) determines how fast the transition is animated
• Show image for 10 seconds: auto option. This way the carousel autoscrolls and the time you specify in milliseconds is the time between two consecutive slides

---

Check a demo here: http://jsbin.com/etena/ (Watch the code here http://jsbin.com/etena/edit)

---

You can't. With easing you can only set the method in which it slides, but jCarousselLite will always slide.

Ofcourse you can change the plugins' default behaviour to match your specific needs. Example here: http://snipplr.com/view/18326/jcarousellite-fade-animation/ (I didn't test this, but looks ok)

---

You can't do that with easing. Building on/simplifying what publicJorn wrote, here's a way to add fadeIn/FadeOut effect on sliding:

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