JQuery jCarouselLite plugin with fade effect

Question

Greetings to all...

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

Needs:

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

Can anyone guid me for this please.

Geetha.

Then maybe consider at least giving me an upvote for all the effort — jitter, Mar 16 '10 at 13:55

score 6 · Answer 1 · answered Apr 17 '12 at 08:26

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
    }
);

jitter · Accepted Answer · 2010-03-16T11:59:07.457

1

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)

edited Mar 16 '10 at 11:59

answered Mar 16 '10 at 10:19

jitter

53,475
11
111
124

1

I didnt get the fade effect. :( – Geeth Mar 16 '10 at 10:59
Is it possible to get the fade effect in jCarouselLite which is available in cycle plugin – Geeth Mar 16 '10 at 12:15
I don't know. You could look at the code of the cycle plugin and try to port the fade effect to jCarouselLite. Otherwise I guess it won't work – jitter Mar 16 '10 at 12:50
Thanks for that demo, it's a million times easier to tinker with than jcarousellite's (messy) site.. – Alkanshel Aug 16 '11 at 23:02

score 1 · Answer 3 · answered Jul 29 '10 at 13:42

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)

score 0 · Answer 4 · answered Dec 16 '11 at 18:47

0

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);
    }
});

answered Dec 16 '11 at 18:47

mrgreenfur

84
11

I am not the TS, but is it possible to fade from image to image? Now it's fading from image to white to image. – mat Dec 19 '11 at 08:21
possible but you need to manually overlap images during the transition (and making the top one fade out should do the job) – Guillaume86 Dec 25 '11 at 19:49

JQuery jCarouselLite plugin with fade effect

4 Answers4