Search code examples
jqueryfadeanythingslider

AnythingSlider cross-fade not working

I'm using AnythingSlider for a client site. The latest version of Anything Slider (1.8.x) supposedly will now cross-fade the slides. But for some reason it's just not working. It still does what the older versions did: fade out a slide, then new slide pops up. Very frustrating. I'm guessing that it must just be some setting I have incorrect, but for the life of me I can't tell what. Hair. Pulled. Out.

My initialization code is:

    $('#slider').anythingSlider({
    mode                : 'fade',
    resizeContents      : false,
    delay               : 6000, 
    resumeDelay         : 5000,
    navigationSize      : 5,
    buildStartStop      : false,
    hashTags            : false,
    autoPlay            : true
    });

You can take a look at the testing site here: http://mlkchapel.dandelion-patch.com/test.html

Any thoughts on why the cross-fade isn't working? I appreciate any insight!

Solution

  • A similar issue was reported at the github repository. Basically this problem appears when the slider is wrapped in positioned (relative or absolute) elements with a background color/image.

    Just change these two lines in the css to fix it.

    .anythingSlider .fade .activePage { z-index: 1; }
.anythingSlider .fade .panel { z-index: 0; }

    The .panel previously was set with a -1 z-index.