Ghost / Blank Slides When Using CMS Dynamic Images and Inputs

Community resources Webflow Tips
1

I know a lot of you have had the problem of ghost slides appearing when creating product pages with Image Slideshows based on image input fields in the CMS. This problem occurs when you have more slides in the slide show than set image fields. Here’s your solution:

  1. Create a slider with as you have image fields as you have created in the CMS.
  2. Set each slide with the image you want to display from your dynamic field.
  3. Set a conditions to show those slides if that image is set.
  4. Duplicate that slider as many times as you have Image fields.
  5. Set each slide show to be conditionally visible if images are set and not set.
    *Example:
    Total Image fields in collection: 4
    Slider 1: Has 1 Image & 1 Slide - Conditions: Image 1 is set, Image 2 is not set, Image 3 is not set, Image 4 is not set.
    Slider 2: Has 2 Images & 2 Slides - Conditions: Image 1 is set, Image 2 is set, Image 3 is not set, Image 4 is not set.
    Slider 3: Has 3 Images & 3 Slides - Conditions: Image 1 is set, Image 2 is set, Image 3 is set, Image 4 is not set.
    Slider 4: Has 4 Images & 4 Slides - Conditions: Image 1 is set, Image 2 is set, Image 3 is set, Image 4 is set.

This will allow you to display the slider with the correct number of slides for the images you have set, without ghost/blank slides.

Cheers!
:wink:

Aaron Pratt

Here is my public share link: LINK
(how to access public share link)

5 Likes
2

Hi Pratt,

I cannot find an option to set the condition for a slide. It is possible to set a condition for elements in a slide, but not for the slide itself.

Did I miss something?

Harald

3

This solved the problem!
Thanks :slight_smile:

4

Thanks for the tip… pretty clever! Just a note for others that if you have more than 20 collection list items this trick won’t work.

5

I have exactly the same issue - can’t see conditional visibility on the Slider, only individual slides. Did you ever solve this please?

7

Thanks for the workaround!

It took me a while to figure out the directions, so sharing a screenshot, which might be helpful. You have to create multiple sliders and set the conditional visibility rules for the sliders themselves, not the individual slides.

image
image232×960 22.4 KB

8

Thanks Aaron, this works great. I’m a little concerned about performance issues by creating multiple sliders but still better than ghost slides. To answer where conditional visibility is, select the element’s settings (cog on the top right (second tab after appearance)) and towards the bottom you’ll find it.

9

Sorry to necropost, but thank you SO MUCH for this solution @ADPdesign . It worked incredibly well!

Also, big thanks to @connitalupita for the navigator screengrab. I was having trouble visualising it until I spotted your post.

:pray: