Hi,
I have written a code to tie buttons to slides. visitors can hover over the buttons to change the slide, but the slide also autoplays.
I was wondering if there is a way to change the color of the button as the slides change so that visitors know that the specific button is for that slide?
what i am asking is done at this site below
http://mypgebenefits . com/ (please remove spaces to activate URL)
thank you!
Hi,
It is probably possible. but it’s hard to understand from your description what exactly you’re trying to do, so please elaborate, add details, screenshots,
Sorry about that, I will elaborate more.
Currently I have a slideshow on autoplay. Like any slideshow, they change automatically after 5 seconds to the next slides.
I also have buttons the the left of the slides, where if someone hovers over the buttons, the slideshow automatically goes to the corresponding slide. Please see setup below. As you can see, slideshow on the right, buttons on the left.
However, currently when the slideshow autoplays, the buttons on the right do not change color. They stay the dark green. Its hard for visitors to see which button corresponds to which slide.
I would like to see if its possible where when the slideshow changes to the next slide, the button on the right changes to a specific color.
For example, if the slideshow is on the contact human resources slide (as it is on the above screenshot), i would like the “Contact Human Resources” to be a lighter green color and all other buttons remain dark green. And then if the slideshow autoplays to the next slide, I would want the corresponding button to be light green while all other buttons remain the dark green color.
Two screenshots below, from another site, show what I mean. As you can tell, the button color changes to match the slide that is being shown. This is what I want to do.
thank you for your help!
any insights?
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;
});
})
@jonatandor35 thank you! that worked perfectly.
“otherwise you wouldn’t have asked this question, since you could change the color per slide.”
Are you saying i can add buttons to slides? i wasnt able to find a way to add buttons to each specific slide inside the slide. If this is possible, i would love to know how to do this.
Hello! Can you please help me change the border color and not the background?
Hello! Can you please help me change the border color and not the background? I can’t get it to work :‘(
Please open a new thread (new post) with details.