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

Community resources Freelance & Jobs
8

@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