Grow your CSS skills. Land your dream job.

Loop Slider – Fade In, Fade Out Effect

  • # January 11, 2012 at 10:06 pm

    hi everyone
    i need your help again
    i am working on Loop Slider and couldn’t find any function which allows me to do Fade In, Fade Out Effect when i click Left and Right Function. Here is the JS file http://ge.tt/8PgElCC Please help me its urgent.
    Thanks in Advance

    # January 12, 2012 at 12:44 am

    Are you saying you want a slider that fades?

    # January 12, 2012 at 4:14 am

    hi @jamy_za i am already using Loop Slider .JS link here http://ge.tt/8PgElCC i want fade in and out function. if you have something better and easy to setup share with me Thanks.

    # January 12, 2012 at 4:17 am

    you can see the preview of slider here http://uat1.ascentis.com.sg/FraserWebPortal/portal/ if you click left and right arrow its just slide in and out and i want Fade in and out function like if you click on pagination bottom of slider.

    # January 12, 2012 at 4:55 am

    Ok, look in loopslider.js: You’ll find:

    					$(".next",$t).click(function(){
    if(active===false) {
    animate("next",true);
    if(o.autoStart){
    if (o.restart) {autoStart();}
    else {clearInterval(sliderIntervalID);}
    }
    } return false;
    });

    $(".previous",$t).click(function(){
    if(active===false) {
    animate("prev",true);
    if(o.autoStart){
    if (o.restart) {autoStart();}
    else {clearInterval(sliderIntervalID);}
    }
    } return false;
    });

    Change animate(“next”,true) and animate(“prev”,true) to: animate(“fade”,true);

    Quite lame that you have to actually edit the plugin itself – I’d recommend using something like PlusSlider or AnythingSlider in future. Especially since the developers of those plugins are active on these forums.

    # January 15, 2012 at 8:48 pm

    Thank you so much @Jamy_za next time will use PlusSlider or AnythingSlider =) have a wonderful day

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".