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.
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?
I have gotten this to work properly by tweaking the Webflow slideshow control.
PM me for more details.
Mike
Having the same problem here…
https://www.crystocraft.com/swarovski-corp-gifts-collection/crystocraft-swarovski-beach-bag
If you post your workaround here then you could potentially be helping a lot more people out as opposed to one person 
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
etc…
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
<script>
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);
$projectSlider.find('.w-condition-invisible').removeClass('w-slide');
Webflow.require("slider").redraw();
$projectThumbs.children().eq($activeindex).addClass('active').siblings().removeClass('active');
$('#project-thumbs').find('img').removeClass('add-border');
$projectThumbs.find('.thumb').eq($activeindex).addClass('add-border');
}, 333);
$projectThumbs.on('click', 'div', function() {
var index = $(this).index();
$projectSlider.find('.w-slider-dot').eq(index).trigger('tap');
});
}
});
</script>
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
etc…
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
etc…
Here’s the slideshow in action in a site that’s currently under development:
I hope this helps somebody.
Mike
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! 
<script>
Webflow.push(function() {
$(".w-condition-invisible").remove();
});
Webflow.ready();
</script>
Wow such a neat solution after hours and hours of pulling my hair out ! (Not to mention all the time lost trying to solve the native Webflow lightbox component issue with the CMS) Thanks so much for this @studiopowell you are a genius!
@studiopowell this is genius! Though just tested it and it didn’t seem to work… is there anything obvious I should check for that might be causing a fault?
.I’ve made sure the code is in ‘before body tag’
.Double checked my condition visibility settings
.Everything has been saved and published but I still have the ghost slide…
Imagine you’re a busy guy, but working on the project this week so any response would be seriously appreciated…
Thanks in advance
O
This code is using jQuery. It has to be placed in the before body close area since Webflow loads jQuery right before that.
Share a link to your staging/published site, so we can take a look.
Link below, most of the artist pages (collection pages) have more than one artwork in a slide but not all, I would advise looking at Yayoi Kusama at the bottom of the collection pages list, as she has several images but not the full 12 slides that need to be available.
Thanks for taking the time out to look at this.
Hi @otis_hobbs,
please, can you resend the preview in-designer link again, the one above goes to a 404.
Best,
Ru
Apologies, I unpublished it so the client couldn’t see the site while i was working on it…
no, I mean the read-only link in-webflow (back-end)
