Question

I’m looking for a decent jQuery slider. I would like it so during the transition phase, the image fades away, hides, then fades in the next image. Like this: http://i47.tinypic.com/6gygko.gif

Right now I’m using Plus Slider but it doesn’t exactly hide the image during the transition. Instead it loads the next image then, hides it while showing the second. See this: http://jsfiddle.net/EgkFq

Does anyone know of a decent slider that does what I asked above or at the very least help me with the fiddle to do what I’m suggesting? Also, the images will be dynamic and have transparent backgrounds.

Additionally I would like numeric pagination so the transition only works if you click on the number. I was told I would have to use jQuery to detect how many images, etc.

Other than than the scrollbar issue, it’s solved. http://jsfiddle.net/h7Y3F

Answer 1

http://jsfiddle.net/EgkFq/5/

(function slider(){
    var slides = $("#slider > img");
    var currentIndex = 0;
    var slideCount = slides.length;
    var timePerSlide = 5000;
    var fadeDuration = 1000;

    var nextSlide = function(){
        var nextIndex = currentIndex + 1;
        if (nextIndex == slideCount)
            nextIndex = 0;

        $(slides[currentIndex ]).fadeOut(fadeDuration);
        $(slides[nextIndex ]).fadeIn(fadeDuration);

        currentIndex = nextIndex;
        setTimeout(nextSlide, timePerSlide);
    };

    setTimeout(nextSlide, timePerSlide);
})();

Plugin shmugin.

Here is an example of how to center the image within the “slider” http://jsfiddle.net/EgkFq/9/

(function slider(){
    var slides = $("#slider > img");
    var currentIndex = -1;
    var slideCount = slides.length;
    var timePerSlide = 5000;
    var fadeDuration = 1000;

    var nextSlide = function(){
        var nextIndex = currentIndex + 1;
        if (nextIndex == slideCount)
            nextIndex = 0;

        var me = $(slides[currentIndex]);
        var nxt = $(slides[nextIndex]);

        var w = nxt.width();
        var h = nxt.height();        

        me.fadeOut(fadeDuration);
        nxt.fadeIn(fadeDuration);

        nxt.css({
            "left":"50%", 
            "margin-left":w/2 * -1, 
            "top":"50%", 
            "margin-top": h/2 * -1
        });


        currentIndex = nextIndex;
        setTimeout(nextSlide, timePerSlide);
    };

    setTimeout(nextSlide, 0);
})();