Hiding empty slider components

I am using the slider component to create a carousel of static images that rotate behind the header text. These images need to be updated by the client, so are being populated a CMS collection. The client wants to be able to have between 1-6 images displaying in the slider at any one time

The problem is, when the slider component content is empty (ie its image field in the CMS collection hasn’t been populated), it still renders the empty slider component on the page. What I want to happen is the empty slider container to simply not show at all if it’s empty.

I have searched the forum and found a number of people trying to do similar things. Including this solution which sounds promising but doesn’t seem to work for me: Conditional visibility not working on slide - #12 by studiopowell

Any advice on how to fix this would be very much appreciated!
Thanks
J

Here is my public share link: (https://preview.webflow.com/preview/hksd-2021?utm_medium=preview_link&utm_source=designer&utm_content=hksd-2021&preview=fd0e26e8a7967d66757eebba8f08cc22&workflow=preview)
(how to access public share link)