jquery infinite slider images

Question

I\'m trying to create an infinite slider using jquery. My page has some tags, with the width equal to the window width.

I want to slide every image after 10 seconds

Answer 1

If you are targeting modern browsers that support transitions and transforms i would do it that way..

Demo at http://jsfiddle.net/gaby/dbLu5/

jQuery

var slides = $('.slider-list li'); // cache a reference to the slides

setInterval(function(){
    var current = slides.filter('.current'), // find slide in view
        next = current.next(); // find next slide

    if (!next.length){next = slides.first();} // loop if at last slide

    slides.removeClass('off'); // reposition already viewed slides to the right
    current.removeClass('current').addClass('off'); // set current slide to animate left
    next.removeClass('off').addClass('current'); // set next slide to slide in view
}, 10000); // set the interval

CSS (you need to add vendor prefixes for the transform and transition properties)

.slider-list {
    position:relative;
    padding: 0;
    margin: 0;
    overflow:hidden;
    height: 496px;
}
.slider-list li {
    width:100%;
    height: 100%;
    display: block;
    z-index: 1;
    transition:transform 1s;
    transform:translateX(100%);
    left:0; top:0;
    position:absolute;
    overflow:hidden;
}
.slider-list li.current{
    transform:translateX(0%);
    z-index:100;
}
.slider-list li.off{
    transform:translateX(-100%);
    z-index:100;
}