Conflict with Slider for Mobile only

Design help Layout & Design
1

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

2

I see two options here:

  1. Create a slider with that conditional visibility wrapped inside a div that only shows on mobile so you’re not affected by the fact that you can have different product images for different products

  2. Take a look at solutions like this: CMS Slider

3

Thanks so much for the suggestions @aaronocampo

I just tried the CMS Slider script, but it has the same problems as the other script - it does not display the variants.

Your first solution is very cleaver and does solve the conditional visibility problem, but I realize that using that method (conditional visibility) is very limited because I will have to have a fixed number of slides for each product, and the variants always show the same second image of the main variant.

I’m still hoping to find a script solution because I still prefer a clean slides-per-image-count solution.

Thanks again!