Fullsize background slider z możliwością ustawienia czasu dla każdego elementu

[Kartofelek]

Ja od pewnego czasu robię slidery na podstawie css W Ie8 nie ma pięknego przejsćia (które spokojnie można dopisać robiąc test modernizerem), ale walić to. W mobilkach jest o wiele płynniej.

JS:

Kod:

_slideText = function() {
    var slideTimer = null;
    var slideToShow = 1;
    var pauseTime = 5000;

    function changeSlide() {
        clearTimeout(slideTimer);

        var $slides = $('.slider .slide');
        $slides.removeClass('active');
        $slides.eq(slideToShow).addClass('active');
        
        slideTimer = setTimeout(function() {
            slideToShow++;
            if (slideToShow >= $slides.length) {
                slideToShow = 0;
            }
            changeSlide();
        }, pauseTime)
    }
    slideTimer = setTimeout(function() {changeSlide();}, pauseTime)
};

$(function() {
     changeSlide();
});

html:

Kod:

<div class="slider">
    <div class="slides">
        <div class="slide active">            
            <img src="czarnobialy" />
        </div>
        <div class="slide">
            <img src="kolorowy" />
        </div>                    
    </div><!-- e: slides -->
</div><!-- e: slide texts -->

i css:

Kod:

html, body {height:100%; position:relative;}
.slider {width:100%; height:100%; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-1;} /* pewnie chcesz to miec w tle? */
.slider .slide {width:100%; height:100%; position:absolute; top:0; left:0; bottom:0; right:0; -moz-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; visibility:hidden; opacity:0; filter:alpha(opacity=0); z-index:0;}
.slider .slide img {width:100%; height:100%; position:absolute; top:0; left:0; bottom:0; right:0; display:block;}
.slider .slide .active {visibility:visible; opacity:1; filter:alpha(opacity=100); z-index:1;}

Dzięki transition i zmianie opacity:0 i visibility:hidden na opacity:1 i visibility:visible zyskujesz płynne przejscia slajdów. Działać będzie max płynnie, bo to animacje css. Za pomocą js nie uzyskasz czegoś takiego :}

Możesz też użyć np http://slidesjs.com/ - to też używa css transition. Ale nie jestem pewien czy tak łatwo będzie ci to zgrać.