Infinity Loop Slider Concepts

Question

I wonder what are the best(good readable code, pest practice code,reusability) concepts to build a Infinity-Image-Loop-Slider for a Website using JavaScript/jQuery? I dont w

Answer 1

I've just created the item slider: check it out: https://github.com/lingtalfi/jItemSlider/blob/master/README.md

It's 600 lines of code, maybe you can simply browse it.

The idea behind it is inspired by the netflix slider (as of 2016-02-24).

Basically, it uses css transform translations, because those are the fastest/slickest in a browser.

http://eng.wealthfront.com/2015/05/19/performant-css-animations/

Now the basic concept behind the slide movement, is that you only display the current visible slice, but you also have one invisible slice on the left, and another invisible slice on the right.

And, you also have two extra items, one on each side, so that your items look like this:

previous items - prev extra item - main items - next extra item - next items

Only the main items are visible. The extra items are partially visible. The previous and next items are invisible.

More details here: https://github.com/lingtalfi/jItemSlider/blob/master/doc/conception.md

Now when you slide to the right (for instance), you basically append more items to the right side, and then remove those from the left side.

This technique is the greatest I've encountered so far, because you don't deal with a long list of items (using cloning without removing the invisible items), which can make your animation slower.

Note: my first try of this slider was actually cloning without removing, it works, but I don't like it: https://github.com/lingtalfi/jInfiniteSlider

Also, it's item based (rather than pixels based), and in the end, that's what the user expects because everything is always aligned, as it should be.