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 ).
wfu-slider
attribute
wfu-slider
attributeAdd 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;
Manipulating the Slider
Outside of callback events, you can also access the SA5 Slider object by constructing one explicitly;
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 slidegoToLast()
navigates to the last slidegoToPrev()
navigates to the prev slidegoToNext()
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
See above for details.
Last updated