My CMS Sliders have empty last slides

[espidesigns (Mark Louie Espedido (espidesigns))]

The staging site with the CMS/dynamic sliders
Click the headings (“Along the Golden Mile” and below) to show the sliders.

I was able to link my sliders to a CMS collection. The “client project” can have up to 20 images, using 20 “image” collection fields.

If the image field is not set, then it will not show via Conditional Visibility.

However, if the project’s total image is less than 20, the dynamic slider will show an extra slide with an missing its src.

“East Coast” project has 20 images so the slider works well. The other projects have extra empty last slides. How can I remove those extra slides?

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[PixelGeek (Nelson)]

Hi @espidesigns At this time all components do not work completely with Collection items. This is a feature we are still working on:

https://wishlist.webflow.com/ideas/WEBFLOW-I-30

hope this clears up any confusions

[espidesigns (Mark Louie Espedido (espidesigns))]

Thanks @PixelGeek.

I hope components will work as intended very very soon with Collection items. The issue I have seems to be a single bug and I tried to look for a hack around it. Is there a way to hook a custom function to remove the empty images first before initiating the Slider function?

[Ashish_Tomar]

Just add this code on custom area inside body tag. It’s working for me to remove empty slide.

use document ready function.

$(‘.w-condition-invisible.w-slide’).remove();

[espidesigns (Mark Louie Espedido (espidesigns))]

Thanks @Ashish_Tomar ,

I tried your code and I had a similar script before I posted here. The issue with the script is that the jQuery library and Webflow library (with the slider component) loads before the custom script before the closing-body tag. Meaning, the slider will have been rendered before the .remove() script, with the slides’ positions already set and still showing an empty slide.

With that in mind. I had to find a way to refresh the sliders after the empty images are removed.

I was able to fix the empty last slides with the functions below.
First I remove the empty slides and images after all the images have loaded:

$('img').on('load', function() {
$('img.w-dyn-bind-empty').parent().remove();
});

Then, the next function will have to be inside my “expand accordion” script. When the accordion is expanded, this function will re-render the slider inside it.

Webflow.require('slider').redraw();