Change button colors as slides change

Ask the community
,
5

I’ll assume that the buttons are located outside the slideshow (i.e. you don’t have a separate set of buttons on each slide), otherwise you wouldn’t have asked this question, since you could change the color per slide.

So yes, you can do it as follows:

$w.onReady(() => {
  const buttons = ["button1", "button2", "button3"];//use the property ID of the buttons; order them by the order of the slides.
  const regularColor = "#324F17", highlighted = "#00ff00";
  $w("#slideshow1").onChange(event => {
    let currentIndex = event.target.currentIndex; 
    buttons.forEach(e => $w("#" + e).style.backgroundColor = regularColor);
    $w("#" + buttons[currentIndex]).style.backgroundColor = highlighted;
  });
})