Experimental slideshow with 3 images at the same time

Question

I'm searching for a smart solution to create a slideshow with 3 crossfading images.

The active image should be

1. fade in to 80% opacity in three seconds
2. stay for 1 second
3. fade out in 3 seconds to 0% opacity

All images should do the same but with an offset in time by 2 seconds. As result all 3 images should be showed at the same time.

<div id="cycler">
    <img class="active" src="http://lorempixel.com/720/576/cats/" alt="" />
    <img src="http://lorempixel.com/720/576/sports/" alt="" />
    <img src="http://lorempixel.com/720/576/food/" alt="" />
    <img src="http://lorempixel.com/720/576/fashion/" alt="" />
</div>

Here is my starting fiddle

--

Here is the final code - http://jsfiddle.net/guest271314/9c32wkuk/14/ - works as expected.
Thanks for your ideas guest271314!

Answer 1

css

#cycler img {
    position:absolute;
    opacity:0.0;
}

js

$(function () {
    $.fx.interval = 0;
    (function cycleImages(n, cycler) {
        cycler.eq(n)         
           .fadeTo(3000, 0.8, function () {
            n = n < cycler.length - 1 ? ++n : 0;
            cycleImages(n, cycler) && $(this).delay(2000, "fx")
        }).fadeTo(3000, 0.055);          
    }(0, $('#cycler img')));
});

jsfiddle http://jsfiddle.net/9c32wkuk/15/