Currently, I am working on implementing a Jquery infinite autoplay multiple carousel. What I have done is created two separate carousel blocks on the same page within the body section.
<div class="rotating_block">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
</div>
<br>
<div class="rotating_block">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
</div>
Below is the CSS for the carousel:
.rotating_block {
display: flex;
}
.one {
background: red;
height: 100px;
width: 100px;
}
.two {
background: green;
height: 100px;
width: 100px;
}
.three {
background: blue;
height: 100px;
width: 100px;
}
In my JavaScript code, I have set up arrays like slideIndex and childrens to handle each carousel block separately.
The issue arises when I try to create a carousel function using setTimeout, as it results in a max call exceeded stack/console error being logged multiple times per second. Here's a snippet of the problematic code:
var slideIndex = [];
var childrens = [];
$(".rotating_block").each(function (index) {
slideIndex[index] = 0;
childrens[index] = $(this).find(".block");
function carousel(children, slideIndex) {
console.log('hello world');
for (let i = 0; i < children.length; i++) {
$(children[i]).hide();
}
if (slideIndex > children.length) {
slideIndex = 1;
}
$(children[slideIndex - 1]).show();
setTimeout(carousel(children, slideIndex), 5000);
}
carousel(childrens[index], slideIndex[index]);
});
You can check out the full code example on CodePen.