I have a slider on my site that on my screen currently has five slides visible at a time and is set to auto-play and have infinite scroll. I have 17 slides to display which displays three “pages” of five slides, then two slides on the last page and three blank ones. How do I make it so that slide one, two and three appear instead of the blank ones on the last page, then on the next page four-eight on the next and so on so that it is continuous with no gaps?
Hi @MichaelSzabo, can you please follow the posting guidelines here: Posting Guidelines for the Design Help Category Thanks in advance!
Sorry, here are some pictures since I can’t show company logos or make the site public.
Here is a screenshot with five logos i.e. all slides with images:
Here is a screenshot showing two logos, and space allocated for another three but nothing in:
I want #1 to continue on after #7.
Hope that makes it a bit clearer.
Does anybody have any ideas on this?
I am guessing from your images this is a side scroll looping item slider.
There isn’t a good solution for this to loop sets with a static item slider. That would be very cool to have though
And think it through a bit - when you get to mobile you will probably change the config to display 3 across…
The easy answer is don’t set the slider to loop and click the checkbox to hide the arrows when you hit each end.
Even if you had a seamless loop it is a really safe bet that absolutely no one is going to be OCD enough to click the right or left arrow 85 times to find out. (5 and 17 are prime so 85 repeats before a seamless loop)
Thanks for looking into this. Yes it is the default slider that can be used in webflow. The icons transition to the left.
Yeah I couldn’t really see any options to do what we want.
Yeah, exactly. Tablet or mobile sizes will result in less icons. So I could have the perfect amount of icons for one screen size however it has the spaces at the end on others.
By loop do you mean infinite scroll or auto-play? Infinite scroll seems to have no affect on the gaps at the end, just whether it scrolls right or left when it has finished displaying all slides. If it is on the first one in the sequence does get added straight after the last one, but only when the transition occurs.
I have arrows hidden at each end, but I have also deleted the arrow elements and slide nav from the slider completely as I don’t want them. I also forgot to mention earlier that I have auto-play turned on.
if it is just a passive looping item slider then I would personally just make a design decision and randomize the logos slightly to fill a few more onscreen / display sets than required (maybe 30-35 items total). Unless the user is very intently focused on the content that is scrolling past (like a number sequence) they will absolutely never notice. Otherwise you are really up against the math and would have to hunt for an alternate slider to import. If you chose to populate 30 items then you can easily divide by 5 for desktop and 3 for tablet and everything will loop correctly.
Also, to easily handle the varying display set size across devices, Webflow has a really nice solution in that you can prune individual display elements (object by object) for each media query using this:
then you can reduce by any number of items selectively across your group to fit that device or situation.
It would be a simple and quick solution.
Hope it helps!
Good ideas! I’ll duplicate slides and optimise for desktop and maybe hide a few for tablet and mobile.
Thanks for your assistance.
Webflow please make it a standard option for the slider to continue slides without breaks.
Add this to the Wishlist http://forum.webflow.com/category/feedback/wish-list