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);
}
</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