How to change the color of badge in slideshow?

Question

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> 
`

Answer 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";

How to change the color of badge in slideshow?

Question

1 answers

solution1
1 ACCPTED 2020-06-24 12:07:05

How to change the color of badge in slideshow?

Question

1 answers

solution1 1 ACCPTED 2020-06-24 12:07:05

solution1
1 ACCPTED 2020-06-24 12:07:05