Slider Element ❺

Interact with Webflow's Slider Element

Overview

This feature allows you to work with the Webflow slider element.

Switch slides programmatically- first, next, prev, and last, or go to a specific slide number
Get the current slide number
Get notified when the slide changes

Demonstration

Check the slider demonstrations here-

Use Cases

Enhance navigation;

Link a button or other element to your tab element, to trigger navigation to the first, last, next, or previous tab. These elements can be anywhere on your page, including within the tab element, such as a Next button. You can have as many of them as you like.
Programmatically navigate the tabs element using JavaScript.
Receive callback alerts when tabs change, including auto-changes, and perform other custom script actions.

Setup

Setup your Webflow slider element however you like
Setup other "control" elements that will affect it, such as buttons, etc ( optional ).

Add the wfu-slider custom attribute to the a Slider element. Give it a unique name to identify that element uniquely, e.g. slider1.

This makes the slider element accessible in code.

JavaScript API

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>

Outside of callback events, you can also access the SA5 Slider object by constructing one explicitly;

const slider = new sa5.WebflowSlider(
    document.querySelector('[wfu-slider=demo1]')
);

Once you have this, you can call its methods and properties;

Properties;

name property returns the [wfu-slider] name, if one was set.
currentIndex gets or sets the 0-based index of the current slide ( i.e. 5 slides would be numbered 0, 1, 2, 3, 4 ).
currentNum gets or sets the 1-based index of the current slide ( i.e. 5 slides would be numbered 1, 2, 3, 4, 5 ).

Methods;

goToFirst() navigates to the first slide
goToLast() navigates to the last slide
goToPrev() navigates to the prev slide
goToNext() navigates to the next slide

See Slider Code Examples for more.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

STEP 3 - ( OPTIONAL ) Use the API & Callbacks to control the element from your custom code