Slider JS API Events

Receiving Slide Changed Events

To receive events from tab changes setup an SA5 callback with the slideChanged event. When called, it will contain the slider object, and the index of the new slide ( 0-based ).

If you have multiple sliders marked with [wfu-slider], you can assign a unique name, and access it through slider.name, as in this example;

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['slideChanged', 
  (slider, index) => {
    
    console.log("SLIDE CHANGED", slider.name, slider, index); 

    switch(slider.name) {
      case "demo1": // Demo 1 slide changed

        break;
      case "demo2": // Demo 2 slide changed

        break;
    }

  }]); 
</script>

Manipulating the Slider

sa5.push(['slideNextRequest', 
  (slider: any, index: any) => {
    console.log("SLIDE NEXT REQUEST", slider.name, slider, index); 

    // Example usage:
    // This will fetch the 3rd slide from the slider with the custom attribute 'wfu-slider="quiz"'
    const slide = this.getSlideByPosition(index + 1);
    if (slide) {
        console.log('Slide found:', slide);

      return this.checkRadioSelection(slide); 

    } else {
        console.log('Slide not found.');
    }

    return (index < 6); 
  }]); 
sa5.push(['slidePrevRequest', 
  (slider: any, index: any) => {
    console.log("SLIDE PREV REQUEST", slider.name, slider, index); 
    return (index > 0); 
  }]);