Help with multiple automatic slideshows

Hello,
I am a beginner in web design and have issues with a website I am currently building.

I'm trying to assemble and auto-execute multiple slideshows on the page, but I can not figure out how to revise the javascript section. I also tried the code for multiple sliders on W3schools, but it does not work. I looked at a billion other forums with similar questions, but none helps with automatic slideshows. I'm simply saying that copying the javascript code and modifying the targeted CSS class may work, but it will not work.

Currently, I have an animation work (the first slide show container) with the following code, while the second, with all the slide show images in it, sits on the page under another.)

Any help would be appreciated.

The code sections are as follows:
HTML:

SEMrush

CSS:
/ * Slideshow Container * /
.slideshow-container {
Max width: 320px;
Position: relative;
Margin: car;
}

javascript:
var slideIndex = 0;
showSlides ();

Function showSlides () {
var i;
var slides = document.getElementsByClassName ("mySlides");
for (i = 0; i <slides.length; i ++) {
films.style.display = "none";
}
slideIndex ++;
if (slideIndex> slides.length) {
slideIndex = 1
}
films[slideIndex – 1].style.display = "block";
setTimeout (showSlides, 2000); // change image every 2 seconds
}