Streaming live at 10am (PST)

Need help with making a dynamic slider hide slides not set in CMS

We built a site using dynamic sliders but only after realized the “Hide this slide if X isn’t set” feature in webflow doesn’t work properly. So now the last slide of the site shows a blank image. We’d like to re-arrange the slider module to work properly when an image in the CMS isn’t set.

Get in touch if you’re able to fix it for us! Thanks.


Hi @Pascal_T

At this time, Collections and Components do not work perfectly with each other. We are working on a future update to make this work. You may need to find a workaround to your design.

1 Like

Hi checking in on this feature. Any workaround solutions discovered for this? The closest think I can think of doing is setting multiple slideshows into my desired container within the collection (each slideshow contains a different qty of slides) and setting the values on the entire slideshows. If “image3” is set you will get the “3-slide-slideshow” element. And hide the others. If only your “image1” is set, you get the “image” element and the slideshows will hide. Does that sound right?

1 Like

I have gotten this to work properly by tweaking the Webflow slideshow control.

PM me for more details.


Having the same problem here…

1 Like

If you post your workaround here then you could potentially be helping a lot more people out as opposed to one person :wink:

1 Like

What’s the workaround?


Sorry for the delay. For some reason I never got notified about your post even though you mentioned me. I just happened to be revisiting this topic today and saw it.

If anybody else is still having this problem, my solution was to create a collection just for the slideshow images “Slideshow Images” with 5 images, and 5 captions (my customer wanted a maximum of 5). Then create another collection for Projects (or whatever) that was linked to that particular slideshow’s images. There’s a number field “Visible Images” in the Projects collection that can be incremented/decremented from the CMS that tells you how many images you want to display in each particular slideshow, and then visibility conditions were added on each slide in the Webflow slideshow itself:

1.) First slide: “Number of Images” is Greater than 0
2.) Second slide: “Number of Images” is Greater than 1
3.) Third slide: “Number of Images” is Greater than 2

Here’s the snippet of code to remove the w-slide class from the slides that are hidden by the CMS so there’s not extra slides displayed at the end of the slideshow after you run out of slides:
The ID of the Webflow Slider itself was set to: project-slider

Webflow.push(function() {
  var $projectSlider = $('#project-slider');
  var $projectThumbs = $('#project-thumbs');

  if($projectSlider.length > 0) {

    setInterval(function() {
      var $activeindex = $projectSlider.find('.w-active').index();
      var $slide = $projectSlider.find('.w-slide').eq($activeindex);

    }, 333);

    $projectThumbs.on('click', 'div', function() {
      var index = $(this).index();

I also added some thumbnails below the slideshow for alternate navigation, and added a thick border around the thumbnail that matched the active index of what was currently being displayed. These thumbnails below the slideshow are tied to On/Off switches that were set in the “Projects” CMS according to the number of slides that were in the slideshow.
Thumb 1 On
Thumb 2 On
Thumb 3 On

With visibility conditions set on each DIV that houses each individual thumbnail:
1.) Thumb 1 is On
2.) Thumb 2 is On
3.) Thumb 3 is On

Here’s the slideshow in action in a site that’s currently under development:

I hope this helps somebody.


1 Like

Great solution, Mike @Hyperpixels. Ran into this same issue, this was super helpful!

I don’t know if any of you all are still looking for a solution but here it is.

The task: To force Webflow to actually remove the Slide after it has been made conditionally invisible.
The problem: Webflow is hiding the CMS content for the Slide but not the Slide architecture itself, thus the blank ghost slide.
The solution: Push a .remove() command directly to the Webflow js for whenever the conditional visibility is set to be hidden.

Why this is the best solution: No new collections, no complicated site architecture changes, just plug the following code right into the “Before Body Tag” section of your page and publish.

Super easy, and quick, even if you have a ton of collection items.

Hope this helps someone! :slight_smile:

Webflow.push(function() {