Integrate swiper.js slider in a collection list

Design help Custom code
1

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://discourse.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.

Screen Shot 2021-01-26 at 9.04.37 am
Screen Shot 2021-01-26 at 9.04.37 am870×2062 113 KB

Here is my site Read-Only: https://preview.webflow.com/preview/big-love-co?utm_medium=preview_link&utm_source=designer&utm_content=big-love-co&preview=2d547ce360b0b4361741751e16f14691&pageId=5faf930b439fde2208373730&mode=preview

2

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?)

3

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 Baby shower gifts, Baby gift Hampers - Big Love Co

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