Click here to Skip to main content
15,740,731 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:

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

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;

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 :


What I have tried:

I wil be happy if someone solves my problem

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900