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.
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.
