Comments (15)
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:
- This is not in the library right now and may not make it as a full feature.
- The theme must be customized for each
loop
setting. The example theme only correctly supportsloop: 2
- 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. - The
spacing
setting does not do anything when they're absolutely positioned. That has to be controlled with the theme. - 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?
from jquery-flipster.
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?
from jquery-flipster.
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.
from jquery-flipster.
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()
from jquery-flipster.
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.
from jquery-flipster.
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.
from jquery-flipster.
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.
from jquery-flipster.
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.
from jquery-flipster.
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
#51 (comment)
.
from jquery-flipster.
Yea, I'm pretty tied up with two projects, but I should have some time over the holidays to get something together.
from jquery-flipster.
Started a branch for infinite loop to make this a little easier to keep track of. Anyone have any thoughts?
from jquery-flipster.
Any chance of making this feature official? The demo you showed is exactly what I am looking for!
from jquery-flipster.
@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.
from jquery-flipster.
@shshaw Thank you for your response!
from jquery-flipster.
This repository is going into very-low-maintenance mode and declaring backlog bankruptcy
from jquery-flipster.
Related Issues (20)
- How to enable Swipe option for all devices ? HOT 1
- Carousel could have on option not to have any thumbnail selected HOT 1
- Clicking on the third or later items from the current position with loop enabled moves to the last item HOT 2
- How to trigger a function only on previous HOT 2
- Keyboard nav won't work unless flipster element is focused HOT 2
- Decrease brightness of all but current item HOT 2
- Animation bug in chrome and opera HOT 4
- Caption and Description to the right of flipster carousel HOT 1
- navbar color HOT 1
- On Render Method HOT 1
- Highlighted image won't be in the center of the page. HOT 1
- Unable to preventDefault inside passive event listener
- Enable usage with jquery as npm dependency in single page applications and NextJS HOT 1
- HTML links in slide not working HOT 1
- Broken in Chrome, Edge, Safari HOT 2
- If I Have Multiple Item <li> HOT 1
- Focus scrolling on slider while in slider and disable page scrolling HOT 1
- not working in jquery-3.6.0.min.js HOT 1
- How do I get the index of the current active image? HOT 1
- carousel start:center not working after flipster('index') HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-flipster.