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

I've made two simple jquery plugins for that:

• https://github.com/lingtalfi/jItemSlider
• https://github.com/lingtalfi/jInfiniteSlider

I recommend the item slider because the items are forced to be aligned, and it's simpler in the end.

Now to answer your question: How do I append the first item after the last item and so on so it can be infinite?

You could just display your slider items two times (or more) in a row. Given your html code:

var jSliderList = $(".slider-list");
var jSliderOriginalItems = $("li", jSliderList); // keep track of this one

function init(){
    jSliderList.append(jSliderOriginalItems.clone()); // should work, not tested
}

Then with css, you would narrow the slider to the width of your choice.

Suggestions:

I would suggest that you append a page rather than just one item.

A basic approach would be to encapsulate things into functions, like this:

slideToRight()
    appendItemsToTheRight()
    removeUnecessaryItemsToTheLeft()
    slide()

To perform the slide, you could use css transitions. In your css, put something like this:

.sliderContainer {   
    transition: transform 2s ease;
}

And then in your js code, to slide, just use a function such as:

function moveSlider(the_offset) {
    jSliderContent.css({
        transform: "translate3d(" + the_offset + "px, 0px, 0px)"
    });
}

Now to actually append an item, you could use a renderItem function to generate them, instead of cloning things.