Multicarousel on the same page

Although I now prefer to use only the css to create carousel slides, for some sites I had to find alternative solutions using Javascript together with Bootstrap, very simple to create responsive slides thanks to codes known for years and used by many programmers, it is also easy to create more slides on the same page but there was a problem that plagued me and to which practically no one had yet given a solution, to create several automatic bootstrap carousels on the same page, hence the desire to want to find a solution to share with those who have not yet solved this thorny problem.

I suggest creating two different JS files, a classic for slides that can also be viewed at:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple

and the other that I present below to make them all automatic:

var slideIndexX = 0;
var slideIndexY = 0;
var slideIndexZ = 0;
var slideIndexQ = 0;
var slideIndexW = 0;
var slideIndexE = 0;

carousel();

function carousel() {
    var i;
    var j;
    var k;
    var a;
    var s;
    var d;
    var x = document.getElementsByClassName("mySlides1");
    var y = document.getElementsByClassName("mySlides2");
    var z = document.getElementsByClassName("mySlides3");
    var q = document.getElementsByClassName("mySlides4");
    var w = document.getElementsByClassName("mySlides5");
    var e = document.getElementsByClassName("mySlides6");

    for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } slideIndexX++; if (slideIndexX > x.length) {slideIndexX = 1}
    x[slideIndexX-1].style.display = "block";

    for (j = 0; j < y.length; j++) { y[j].style.display = "none"; } slideIndexY++; if (slideIndexY > y.length) {slideIndexY = 1}
    y[slideIndexY-1].style.display = "block";
    
    for (k = 0; k < z.length; k++) { z[k].style.display = "none"; } slideIndexZ++; if (slideIndexZ > z.length) {slideIndexZ = 1}
    z[slideIndexZ-1].style.display = "block";
    
    for (a = 0; a < q.length; a++) { q[a].style.display = "none"; } slideIndexQ++; if (slideIndexQ > q.length) {slideIndexQ = 1}
    q[slideIndexQ-1].style.display = "block";
    
    for (s = 0; s < w.length; s++) { w[s].style.display = "none"; } slideIndexW++; if (slideIndexW > w.length) {slideIndexW = 1}
    w[slideIndexW-1].style.display = "block";
    
    for (d = 0; d < e.length; d++) { e[d].style.display = "none"; } slideIndexE++; if (slideIndexE > e.length) {slideIndexE = 1}
    e[slideIndexE-1].style.display = "block";

    setTimeout(carousel, 5000);
}

This example takes into consideration 6 automatic carousels on the same page, and can be used for any other pages.

I hope it can be useful.