Change button border when slide changes

Ask the community
,
1

Hello! I am trying to get the border color of the button to change when the slide changes (buttons are outside the slider)

This are the two different codes that I’m trying but i don’t know what I’m missing since neither of them work.

$w . onReady ( function () {

const  blueColor  =  "#0C3C60" ; 
const  textColorActive  =  "#FFFFFF" ; 

const  whiteColor  =  "#FFFFFF" ; 
const  textColorInactive  =  "#0C3C60" ; 

 $w ( '#360MimicButton' ). onClick (() => { 
    $w ( "#TenderModelSlides" ). changeSlide ( 0 )  

 }); 

 $w ( '#390HammerButton' ). onClick (() => { 
    $w ( "#TenderModelSlides" ). changeSlide ( 1 )  

 }); 

 $w ( '#420ReefButton' ). onClick (() => { 
    $w ( "#TenderModelSlides" ). changeSlide ( 2 )  

 }); 

$w ( "#TenderModelSlides" ). onChange ( event  => { 

    const  buttonNames  = [ "360Mimic" ,  "390Hammer" ,  "420Reef" ]; 

     buttonNames . forEach ( buttonName  => { 
         let  button  =  $w ( "#"  +  buttonName  +  "Button" ); 
         let  index  =  $w ( "#TenderModelSlides" ). currentIndex ;   // 2 

         if  ( event . target . currentIndex  ===  index ) { 
             button . style . borderColor  =  blueColor ; 
             button . style . color  =  textColorActive ; 
         }  **else**  { 
             button . style . borderColor  =  whiteColor ; 
             button . style . color  =  textColorInactive ;

}
});
});

$w . onReady ( function () {

 $w ( '#360MimicButton' ). onClick (() => { 
    $w ( "#TenderModelSlides" ). changeSlide ( 0 )  

 }); 

 $w ( '#390HammerButton' ). onClick (() => { 
    $w ( "#TenderModelSlides" ). changeSlide ( 1 )  

 }); 

 $w ( '#420ReefButton' ). onClick (() => { 
    $w ( "#TenderModelSlides" ). changeSlide ( 2 )  

 });

});

$w . onReady (() => {
const buttons = [ “360MimicButton” , “390HammerButton” , “420ReefButton” ]; //use the property ID of the buttons; order them by the order of the slides.
const regularColor = “#FFFFFF” , highlighted = “#0C3C60” ;
$w ( “#TenderModelSlides” ). onChange ( event => {
let currentIndex = event . target . currentIndex ;
buttons . forEach ( e => $w ( “#” + e ). style . borderColor = regularColor );
$w ( “#” + buttons [ currentIndex ]). style . borderColor = highlighted ;
});
})

Basically, w hite when button is not active, and dark blue when the slide is active.

2758×942 194 KB

2

First of all, you posted the same code twice. Get rid of the duplicate code (unless it’s just a copy-pate mistake).
Second - just as a reminder. The index starts from zero.
Third, you cannot change the ‘disabled’ state style of button by Velo code.

3

In addition to the previous comment from J.D.

You can use leave the code from the first onReady, just modify it:
As the index variable is the current index of the slideshow, it will always be equal to the event.target.index of the onChange event.

You need to name the slides of the slideshow the same way as in the buttonNames array (e.g. slide1 name 360Mimic ).
Then compare current slide name with the button name value:

 if (event.target.currentSlide.name === buttonName) {
                 button.style.borderColor = blueColor;
                 button.style.color = textColorActive;
             } else {
                 button.style.borderColor = whiteColor;
                 button.style.color = textColorInactive;
  }