I have an image carousel on a grid that shows multiple images of a product. I’m able to reconfigure the grid for each breakpoint fine.
For mobile, I would like to use a slider, and that’s where the problems begin…
I used a different container for the slider (Static Slider Container) and set its display to hidden for all breakpoints except mobile, and for mobile I set the grid to hidden.
Webflow does not give you the option to make the slider’s extent (number of slides) automatically based on your product. Some products have 3 or 4 images, others only one. So if I set the number of slides to the maximum number (let’s say 4), the ones with a single image will still have a slider with four dots but only one image and three blank slides.
So, I tried using conditional visibility - Slider Element is visible when CMS ’Second Image’ is set, and the Image Carousel is visible when CMS ‘Second Image’ is not set, basically trying to show the slider only if there’s more than one image for a product, and if there’s only one image - show the static single image instead of a slider.
The problem with this solution is that the conditional visibility applies to all breakpoints, so when I have more than one image the slider disappears on mobile, but when I have more than one image - the entire image carousel disappears on all other breakpoints, so it’s a bit of a catch.
So I tried this custom code made by a user named @eli11: Tutorial - Dynamic Multi-Image Slider - Webflow and I could make it work so that the slider adjusts its number of slider depending on how many images exist per product (Dynamic Slider Container), but here the problem is that the slider doesn’t display the product variants, so it’s useless for me as I have different images for different colored t-shirts and hoodies.
I’m sure there’s a simple solution I’m missing here.
Here is my site Read-Only: LINK