Comment on page
Slider Element ❺
Interact with Webflow's Slider Element
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
Check the slider demonstrations here-
Slider
Demo
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 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.
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;
nameproperty returns the[wfu-slider]name, if one was set.currentIndexgets or sets the 0-based index of the current slide ( i.e. 5 slides would be numbered 0, 1, 2, 3, 4 ).currentNumgets 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 above for details.
See above for details.
Last modified 1mo ago