Help with Sort and Slider

webpage
project file

Hello, I’m wondering if anyone has a solution for this? I’m getting a strange overlap of the sort item cells, when put a slider in the cell.

Thanks so much,
Yon

Are you attempting to put a Slider inside of a Sort item? If so, you cannot do that. Complex items like Sliders do not work well within elements that are hidden during page load. This is because Sliders and the like need to be able to judge what space they have to work within. When hidden during page load they believe that they have zero space within which to exist, which leads to problems. The old K.I.S.S. rules work best even with web design usually.

3 Likes

Keep It Simple Stupid… Yes, that is the intent, a one page shop. Make an inline slideshow instead of having people go to a product specific page to see the same thing.

Thank you for explaining the developer side issue. Now I can see that any responsive container could have the same issue, i.e. MovingBox had the same issue. RefinedSlider seems to work, but not if you resize the screen.

For some reason, the RapidCart product slider works… not pretty, but that is what we are using for the purchase back end.

Next, to try image stacks that at least show two images. Maybe those give their size at the right time for Sort. I’ll post back if i find a fit.

If you think of a slide show that could play nice, please let me know.

Take care,
Yon

A solution found, Megaglider (free) from Stacks4Stacks.

You can put Foundry images in as slides (square shapes hold up best, responsively), and Sort works great… no overlap.

Second solution was a hover image swap. But that is only one image as a swap.

Take care,
Yon

2 Likes