Streaming live at 10am (PST)

Integrate swiper.js slider in a collection list

Has anyone managed to integrate Slider.js into a collection list?

One issue with Slider.js is there can’t be two instances of a Slider.js slider on the same page without changing its name, correct me if I am wrong.

I did come across this bit of code )below) which automatically alters the sliders name but I am not sure if this will work in this instance or I just did not implement it correctly so I removed the code. Also not sure how this would work in a collection list.

const myCustomSlider = document.querySelectorAll(’.swiper-container’);
for( i=0; i< myCustomSlider.length; i++ ) {
myCustomSlider[i].classList.add(‘swiper-container-’ + i);
var slider = new Swiper(’.swiper-container-’ + i, {
/* Options */
});
}

There is some info in the thread link below of how to create multiple sliders on the same page thanks to but not how to integrate Swiper in a collection list.

https://forum.webflow.com/t/how-to-integrate-swiper-js-6-slider-carousel-mobile-touch-webflow-cms/111069/56

I have attached a screen shot of where it is located.


Here is my site Read-Only: Webflow - Big Love Co

Create a “demo” page (add password “1234” to avoid google indexing).
No way to help you without example.

Your idea is to create a slider for each collection item? (Like some real estate sites do?)

Hi Siton, So I have managed to set up swiper.js on the product/variants collection page and it works great.

On the curate your own page, as the customer can bundle products together I had to implement a more info popup button so rather than the customer leaving the bundled page it brings up each products description similar to how it would show up on the actual product/variants collection page. here I have also implemented the swiper.js but it doesn’t work correctly the arrows do not cycle through the images.

the live link is Curate your own

sorry I just realised that no-one can actually view the slider without the live link.