my goal is to create a fully dynamic showcase of a painter’s work. The project requires me to display multiple CMS sliders on a single page, one for each painting with additional views of the corresponding painting.
Here’s the CMS structure I’m working with:
A “Series” Collection
A nested “Paintings” Collection
Essentially, I need to dynamically generate one slider for each painting, with that slider pulling its images from an image/multi-image field from the same collection item. This multiple times.
I found an apparent solution, similar to my problem, using Splide.js, but i could not make it work.
(The whole thing should then be arranged in some sort of tab structure, so that the individual sliders can be controlled. But that’s a task for later.)
Has anyone successfully implemented this exact feature? Any guidance or examples would be incredibly helpful!
That’s a classic (and tricky!) Webflow challenge. You’re on the right track – since the native slider doesn’t work in a collection list, custom code is the way to go.
And Splide.js is an excellent choice for it. The reason that setup often fails is usually a small initialization issue. When you have a dynamic list, you have to tell the script to find and start up every single slider individually, not just one.
The core idea is that you need a script that loops through all the .splide elements on the page and starts a new slider for each one. So, you’ll need two things in place:
The right HTML structure: Inside your “Paintings” Collection Item, make sure you have the standard Splide structure (.splide > .splide__track > .splide__list > .splide__slide).
A loop in your custom code: After your Collection List, you’d add an embed with a script that looks something like this:
JavaScript
// Loop through all elements with the class 'splide'
document.querySelectorAll('.splide').forEach(slider => {
new Splide(slider, {
// You can add your options here, e.g., type: 'loop'
}).mount();
});
there is a slider, but only for one CMS item and it is not dynamic to the amount of images inside that item. Furthermore, it only shows the slides i made in the designer: Webflow - Benjamin Portfolio
Have you considered creating a multi-image field inside Paintings collection instead of using single image fields?
If you store the images in a multi-image field instead, then you can check this cloneable out which shows a way to dynamically create slides as per the number of images in the multi-image field for each collection item. You could probably take inspiration from this setup if having a multi-image field is possible for your project.
You’ll need to wrap each multi-image field in the proper Splide structure inside your “Paintings” item, then let your script loop through every .splide instance on the page. Had to solve this on an art portfolio build,once each collection item had its own .splide__track and the init script ran after Webflow finished rendering, all sliders mounted fine.