1

I want to change/show the color of the dot depending upon the current slide. In my code the Slide is changed depending upon which dot is pressed but the problem is the dot color doesn't change. I have tried to put the line of code that I have commented in below code but it doesn't work. Below is code:

`<!DOCTYPE html>
 <html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>

<div class="w3-container">
  <h2>Slideshow Indicators</h2>
  <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>

<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides1" src="img_nature_wide.jpg" style="width:100%">
  <img class="mySlides1" src="img_snow_wide.jpg" style="width:100%">
  <img class="mySlides1" src="img_mountains_wide.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1,0)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2,0)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3,0)"></span>
  </div>
</div>

<script>
var slideIndex = [1,1];

var slideId = ["mySlides1", "mySlides2"];
showDivs(1, 0);


function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function currentDiv(n, no) {
  showDivs(slideIndex[no] = n, no);
}

function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block"; 
  dots[slideIndex[no]-1].className += "w3-white";
}

</script>

</body>
</html> 
`
1
  • use classList to add or remove classes dots[slideIndex[no]-1].classList.add('w3-white')
    – Yousaf
    Jun 24, 2020 at 12:12

1 Answer 1

1

You need to add a space for add a more than 2 class with js or it will read as one class:

dots[slideIndex[no]-1].className += " w3-white";
1
  • You need to accept the answer for make this post solved Jun 24, 2020 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.