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.

3 Likes

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.

Mike

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?

@Noah-R
@Jesse_Shauffer

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:

https://www.accofg.com/projects/consolidated-health-science-building-for-george-c-wallace-community-college

I hope this helps somebody.

Mike

1 Like

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