What I am doing
Page with thumbnails link to specific slides in the “gallery” slider. I am using a direct link with the slide ID number to achieve this. All images are being pulled from a CMS collection, 1 image per slide in separate CMS collections (not paginated).
Things I have set to combat the issue
The links are set to “prefetch” (have tried “prerender” as well with no luck), and the images are set to “eager” load. The slider is set to infinite loop. Having the arrows hide at each end, and not infinite loop doesn’t help. Actually made it worse. Removing the page load animation on the slider images doesn’t make a difference either.
The issue
When clicking on the third thumbnail, for example, when you flip to the end of the carousel, it just pulls up blank slides and doesn’t loop properly. Sometimes a refresh will help, but it continues to be an issue.
I have seen some other issues with ghost slides, but only pertaining to people trying to show a certain selection of their CMS images. I am pulling 1 image per slide.
This issue does not happen when I just simplify to URL to the gallery url without the #4, for example.
How can I fix this or set it up differently to avoid this issue?
*site is desktop only. also live on this URL if testing there is helpful.
I can’t give a full feature-build solution here, but I think I can point you in the right direction.
Here’s how I’d approach it-
Ditch the per-slide collection lists, you’re limited to 20 per page anyway.
Use the Webflow Slider + Finsweet’s CMS slider lib to compose it from a single collection list -OR- use Swiper.js to build your slider from a single collection list.
Use the CMS slug as a custom attribute on each slide, or possibly as an ID on each slide
Your custom code checks for a querystring, like ?slide=photo28, and handles the display of that slide through JS.
I wouldn’t try to use # navigation to a slide, as you can see it’s not designed for that and results are unpredictable. The browser’s attempt to bring that element into view is likely breaking the slider’s functionality.
With SwiperJS you have a built in API to select slide N.
With Webflow’s, you don’t but SA5 adds similar capabilities to it.
Note you’ll have to do a lookup first on your ID / attribute and then figure out which # slide that is, so that you can activate it by #.
Thanks for the info - I will look into the alternative slider options to deal with CMS issue. I noticed that restriction, luckily it isn’t an issue for now, but see how it could be.
Any additional info on how to link to a specific slide using Finsweet for example? I have searched for info on how to do that for Finsweet and SwiperJS with no luck.
I am not very code literate so this could get a little bit over my head.
Ah, I’ve gotten you about as close as I can without actually building the feature out- the rest just just the basic grindy dev bit. The slide selection has nothing to do with Finsweet, that part would be handled by SA5 or Swiperjs depending on which slider approach you take.
Drop me a direct message if you need a professional dev to help knock this out.