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
Get notified when the user tries to change the slide, and choose whether to allow it
- Useful for slider-based multi-step forms

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.
Multi-step forms, control when the user can advance to the next step

Features

SA5 Slider is primarily API-based, see the left nav for the API docs.

	Attributes	Javascript API
Identify the slider	wfu-slider	name Can be instantiated on any slider directly.
Go to slide at index ( 0-based )		currentIndex
Go to slide number ( 1-based )		currentNum
Go to first slide		goToFirst
Go to last slide		goToLast
Go to prev slide		goToPrev
Go to next slide		goToNext
EVENTS
Slide changed		slideChanged event.
User wishes to advance to next slide		slideNextRequest event
User wished to navigate to prev slide		slidePrevRequest event

Attributes

Javascript API

Identify the slider

wfu-slider

name

Can be instantiated on any slider directly.

Go to slide at index ( 0-based )

currentIndex

Go to slide number ( 1-based )

currentNum

Go to first slide

goToFirst

Go to last slide

goToLast

Go to prev slide

goToPrev

Go to next slide

goToNext

EVENTS

Slide changed

slideChanged event.

User wishes to advance to next slide

slideNextRequest event

User wished to navigate to prev slide

slidePrevRequest event

Setup

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

To control the Webflow native slider, SA5 uses the slider's navigation elements such as the bottom slide page dots. It's important that they are physically part of the slider, even if you make them invisible with display: none. Do not mark navigation elements as visibility: hidden or SA5 will be unable to interact with your slider.

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.

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 - Use the API & Callbacks to control the element from your custom code