Streaming live at 10am (PST)

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

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!

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:

<script>
Webflow.push(function() {
  $(".w-condition-invisible").remove();
});
Webflow.ready();

</script>
2 Likes

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!

1 Like

@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.

@webdev thats where i have put it… still doesn’t seem to be making any difference…

@studiopowell @PixelGeek This is the error in the developer, does anyone know why?

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.

https://lvh-6e4621.webflow.io/artist-info/yayoi-kusama

https://preview.webflow.com/preview/lvh-6e4621?utm_medium=preview_link&utm_source=designer&utm_content=lvh-6e4621&preview=0a7bf1d2a9979ce75f8f8f40f98664dc&pageId=5d1b4d64aee43c1a9b40c04d&itemId=5d3ee808dbd4a6af9096e9f5

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…

https://lvh-6e4621.webflow.io/artist-info/yayoi-kusama

no, I mean the read-only link in-webflow (back-end)

https://preview.webflow.com/preview/lvh-6e4621?utm_medium=preview_link&utm_source=designer&utm_content=lvh-6e4621&preview=0a7bf1d2a9979ce75f8f8f40f98664dc&pageId=5d1b4d64aee43c1a9b40c04d&itemId=5d3ee808dbd4a6af9096e9f5&mode=preview

Just get rid of this custom code on your Artist’s template page.

<script>
  function init() {
      window.scrollTo(0, 1);
      window.scrollTo(0, -1);
  }
  init()
</script> 

It works for me in inspect once removed. Let me know when published.