Here is how to make a slider for each collection item in a collection list with no ‘Dynamic Id’ / custom field in the CMS.
(See this link to learn about how SliderJS works)
I’m working on a page showcasing a furniture designers work. Each project has a series of images that will be shown in a slider.
It took me quite a while to figure out how to make initiate each slider with an individual class with corresponding ‘next’ and previous buttons.
See example here (Project in the making)
Here goes:
-
Set up the collection list with the projects and a collection list with the images within
(Give names according to the SwiperJS slider)
-
In order to filter through each projects I have the outer collection-list the ID of “projects” (this is important for the code to work, though you can change the name if you change it in the code as well)
-
Making a list of all the divs with the class name ‘swiper-container’ and add a class to the divs and the next and prev buttons.
In the bottom of the page, just before the footer, I added an HTML Embed with the following code:
<script>
// Add classes to swiper containers
var x = document.getElementById("projects").querySelectorAll("div.swiper-container");
x.forEach(function(ele, i){
console.log(ele, i)
ele.className += ` swiper-${i}`;
});
// Add classes to next button
var y = document.getElementById("projects").querySelectorAll("div.slider-next");
y.forEach(function(ele, i){
console.log(ele, i)
ele.className += ` slider-next-${i}`;
});
var z = document.getElementById("projects").querySelectorAll("div.slider-prev");
z.forEach(function(ele, i){
console.log(ele, i)
ele.className += ` slider-prev-${i}`;
});
</script>
- Initiate each sliders
Go to ‘Page Settings’
Just after importing the Swiper JS library, inset this code:
<script>
var slider = document.getElementById("projects").querySelectorAll("div.swiper-container");
slider.forEach(function(ele, i){
var mySwiper = new Swiper (`.swiper-${i}`, {
// Optional parameters
spaceBetween: 0,
navigation: {
nextEl: `.slider-next-${i}` ,
prevEl: `.slider-prev-${i}` ,
},
loop: true,
//pagination: {
// el: '.swiper-pagination',
//},
breakpoints: {
0: { /* when window >=0px - webflow mobile landscape/portriat */
slidesPerView: "auto",
spaceBetween: 0,
},
767: { /* when window >= 767px - webflow tablet */
slidesPerView: "auto",
spaceBetween: 0,
},
988: { /* when window >= 988px - webflow desktop */
slidesPerView: "auto",
spaceBetween: 0,
}
},
})
});
</script>
This code will initiate a slider with a class name corresponding to the one we added in step 3.
You can change your settings for all your sliders in the code and it will change it for all of them.
By adding the sliders this way, your client will be able to add as many collection items / projects as he/she likes without you having to go and initiate a new slider every time.
Hope this can helps someone out there 