Question

I am looking a jQuery-based content slider plugin. I don’t mean one like this (of which there are far too many) nor the jQueryUI slider. What I am looking for can best be described in a picture.

Is there a jQuery plugin which allows me to slide (or transition) certain elements off the viewport and slide new elements in its place? Ideally, I would like to be able to ease several elements off and back onto the page in (sort of a) series, rather than one after another. The ability to ease these elements, rather than slide them with a linear speed, would be awesome.

This picture is the best visual I could come up with:

I know I could develop a plugin, as I have done several before, but I would like to avoid reinventing the wheel, if possible. Can anyone suggest a plugin?

Thank you for your time.

Answer 1

If you’re supporting CSS3, you could try doing something like this, albiet it may be better to build an animation class.

.item:nth-child(1)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.35s;
}

item:nth-child(2)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.55s;
}

.item:nth-child(3)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.65s;
}

.item:nth-child(4)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.75s;
}​

If you want to use jQuery, I’ve had some success with http://api.jquery.com/queue/ which would allow you to craft a more complex chained animation. For an unknown number of children you could use the slice() method.

I’ve changed this snippet of self-executing code found on http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

(function hidenext(jq){
jq.eq(0).fadeOut("fast", function(){
    (jq=jq.slice(1)).length && hidenext(jq);
});
 })($('div'))

You don’t have to use fadeOut and it doesn’t need to be self-executing, but it’s neat and tidy way to apply a ‘transition’ to an unknown number of elements.

Here’s a fiddle using fadeOut http://jsfiddle.net/NpBfJ/ … this is probably more work than you want…:-)

In regards to sliders, this is one of the best free ones out there http://caroufredsel.dev7studios.com/ it has many customizable features.