Infinite Loop Functionality

[jhoffmcd]

trafficstars

Not sure how it can be implemented, but an infinite loop feature might be nice on this.

[DaDanny]

I am using the current master branch and have no problems with infinite loops. If I reach the last image, it cycles through again.

However, I couldn't get infinite loop to work on the v1.0 branch. Which branch are you using?

[shshaw]

Perhaps @jhoffmcd means showing item 1 (perhaps 2 and 3 as well) after the last item so that it's a seamless loop. Based on the way the themes are implemented and extremely flexible, I'm not sure that would be very easily done.

@DaDanny Were you using the loop option in 1.0? It's set to false by default.

[jhoffmcd]

It was a while ago, I don't think version 1.0 was out. I'll have to check it out again, but @shshaw is correct. If you look at sliders like slick and owl carousel you will see examples of the effect I was referring to. I think they use jQuery .clone()

[shshaw]

Yeah, the cloning isn't too crazy but each theme and screensize will display a greatly different number of items on each side. There's no easy way to know how many items to clone to keep the illusion, and then transitioning to the uncloned items could be messy. This functionality might be out-of-scope, unless you have some suggestions.

[roosma]

Found this: http://a.drien.com/jquery-flipster/ Seems like it was implemented back in the days when only the items where transformed, not now when the whole list is transformed.

[shshaw]

Yeah, those demos are from my initial updates. The items were all position: absolute and transformed individually which made it a little easier to loop around but also caused issues with performance, height setting, overflow, etc.

In version 1, the items are inline-block so that they line up and only the container is transformed. Performance seems to be better, and this makes the other Coverflow-esque effects much easier.

I have a theory on how I can get this back in. Running some tests now, I'll post when it's a little more baked.

[shshaw]

Still a work in progress, but wanted to get some feedback.

Infinite Loop Demo This works by using position: absolute on the items, then transform: translate to spread them out. The number of items 'looped' is controlled by the loop setting.

loop can be boolean (true or false), which just controls if Flipster returns to the first item after reaching the end as it always has, or loop can be a number representing the number of items to 'loop' around.

For example, loop: 2 means that item 1 and 2 will receive flipster__item--future classes when the end has been reached, like in the image above.

A few caveats:

1. This is not in the library right now and may not make it as a full feature.
2. The theme must be customized for each loop setting. The example theme only correctly supports loop: 2
3. The number of items in Flipster should be at least loop * 2 + 1, to allow for one in the center with an equal amount of items on each side. It doesn't break, but will cause some lopsidedness.
4. The spacing setting does not do anything when they're absolutely positioned. That has to be controlled with the theme.
5. The position: absolute may cause some unexpected issues. Haven't fully tested it in 1.0 release

I'm thinking a flipster--loop-{n} class added to the Flipster element on init where {n} is the loop setting (similar to the style setting and flipster--transform support class) would allow for easy theme adjustments to compensate for the amount of items shown on each side.

Is this the kind of functionality you expected? Have any ideas for improvements?

[DaDanny]

While I really like this, I'm confused because I've been using this for a while now and have no issue looping images. I'm using the master branch (albeit a later version) but I didn't have any issues with it looping around.

I'd personally prefer to see updated support for swiping. It would be nice if we could drag images to the right and left and instead of waiting for it to "flip" it could move with the drag event.

I'm currently developing an app so my time is tied up but I think this is what I'm going to work on next and will let you know.

I seriously love this library and love your dedication to it! It motivates me to make improvements haha.

[shshaw]

Thanks for the encouragement, Danny!

Yes, the event (wheel, touch, keyboard) could all use some updates. Currently with the touch, it's set up to let you flip through many at once instead of one swipe at a time. Ideally this would be momentum based so you could slowly flip through one item at a time or do a fast swipe to quickly through many items.

I'm confused by your confusion. 1.0's loop only allows you to skip from the last item back to the first item, but doesn't visually show the first item after the last item. The demo above attempts to add that visual back in there to give a greater "infinite loop" look.

Are you using the 1.0 version? Is it with a custom theme? Perhaps you could share an example of your looping On Sat, Dec 5, 2015 at 4:20 AM Danny Francken [email protected] wrote:

While I really like this, I'm confused because I've been using this for a while now and have no issue looping images. I'm using the master branch (albeit a later version) but I didn't have any issues with it looping around.

I'd personally prefer to see updated support for swiping. It would be nice if we could drag images to the right and left and instead of waiting for it to "flip" it could move with the drag event.

I'm currently developing an app so my time is tied up but I think this is what I'm going to work on next and will let you know.

I seriously love this library and love your dedication to it! It motivates me to make improvements haha.

— Reply to this email directly or view it on GitHub https://github.com/drien/jquery-flipster/issues/51#issuecomment-162169078 .

[DaDanny]

Yea, I'm pretty tied up with two projects, but I should have some time over the holidays to get something together.

[shshaw]

Started a branch for infinite loop to make this a little easier to keep track of. Anyone have any thoughts?

[colonelclick]

Any chance of making this feature official? The demo you showed is exactly what I am looking for!

[shshaw]

@colonelclick I don't actively work on this library or with jQuery anymore. Feel free to pick up where I left off. There's a branch available.

[colonelclick]

@shshaw Thank you for your response!

[drien]

This repository is going into very-low-maintenance mode and declaring backlog bankruptcy