How can I display two sliders with 3 images each at the same time without changing their classes?
<div class="abelhabil-sildeshow">
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_lights_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_snow_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_nature_wide.jpg">
</div>
</div>
<div class="abelhabil-sildeshow">
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_lights_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_snow_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_nature_wide.jpg">
</div>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.querySelectorAll(".slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 1000);
}
</script>