Multiple sliders on same page

[abhilashhm]

Hello Everybody,

I am dynamically trying to create multiple sliders on the same page using Javascript. When I use just one slider it works perfectly fine. But when I dynamically create a few through a loop, it makes the skeleton and only the first image is visible. Navigation doesn't work.

Within a for loop, I have this code to activate the slider.

`var slidenum = "slide" + i;

document.getElementById(slidenum).innerHTML += "

"

var id = "slider-container" + i;

for (let j = 0; j < imgs; j++) {
// document.getElementById(id).innerHTML += hex[j];
document.getElementById(id).innerHTML += "

";
}

var sliderid = "#mySlider" + i;
var pagination = "#swiper-pagination" + i;
var nextbut = "#swiper-button-next" + i;
var prevbut = "#swiper-button-prev" + i;

new Swiper(sliderid, {
loop: true,
oneWayMovement: true,
pagination: {
el: pagination,
dynamicBullets: true
},
navigation: {
nextEl: nextbut,
prevEl: prevbut,
}
});`

In the above code, I even tried using class names for the pagination, next, and previous buttons.

What is strange is, when I click the next button, it shows an empty slide. But the previous button shows the image properly. But again this only works on the first slider. Doesn't work on the rest of the sliders on the same page.

Note: If I make the loop run only once, I see the exact same issue. But when I hardcode the SliderID in the new Swiper() method, then it works. But I cannot hard code every time as I am not sure how many slides I would need at a given time.

Any help would be truly appreciated. Thanks in advance.

You can find my code here: JSFiddle