I want to create 1 ID with 3 classes in JS (slider show) code below and style it in CSS?

See more:

Javascript

Hello,

I have been for while looking for how to create slider show in JS and I found the code in w3school so I have studied and use it .

this is my JS code before I ask my question:

<pre><script>
	
let slideIndex = 0;
      let timeoutId = null;
      const slides = document.getElementsByClassName("mySlides");
      const dots = document.getElementsByClassName("dot");  
	  
      showSlides();
      function currentSlide(index) {
           slideIndex = index;
           showSlides();
      }
     function plusSlides(step) {        
        if(step < 0) {
            slideIndex -= 2;            
            if(slideIndex < 0) {
              slideIndex = slides.length - 1;
            }        }
        
        showSlides();
     }
      function showSlides() {
        for(let i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
          dots[i].classList.remove('active');
        }
        slideIndex++;
        if(slideIndex > slides.length) {
          slideIndex = 1
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].classList.add('active');
         if(timeoutId) {
            clearTimeout(timeoutId);
         }
        timeoutId = setTimeout(showSlides, 5000); // Change image every 5 seconds
		  
		 
}	
    </script>

it is working OK when you look on my url.

1 problem exists I want to add on the top of the sliders in 3 column some small texts so I created 1 div with 3 classes it didn't work I had to use big minus numbers to bring those texts on the top of the sliders . I thought I create this div with 3 classes in the JS self and solve the problem. and I think it has to be I searched in google how to add id with 3 classes in javascript code . I found many and tried but it didn't work. I have found chat GPT through someone and tried it . it has created to me this JS code :

<pre>var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  slides[slideIndex-1].id = "myId";
  slides[slideIndex-1].classList.add("class1", "class2", "class3");
}

this code didn't work because of this 2 lines:

slides[slideIndex-1].id = "myId";
  slides[slideIndex-1].classList.add("class1", "class2", "class3");

to be sure I inserted this 2 line code in my own JS code above it didn't work either.

I am sure that it has to be to create ID with 3 classes in JS slider show code and style it in CSS.

I am asking this question for someone hoe knows very good or is expert in Javascript.

how I can solve this problem or how I can create ID with 3 classes in the code above (first JS CODE above) not the second which is created with chat GPT.

and where exactly insert it in the code above?
my url is :

thanks

What I have tried:

I wil be happy if someone solves my problem
thanks