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-

Slider

Demo

Webflow Smart Elements - WebflowWebflow Smart Elements

Cloneable

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

Getting Started

1. First, add the library as detailed in Quick Start.

2. Apply the custom attributes to the elements you want to affect

3. Use the API & Callbacks to control the element from your custom code

See above for details.

• 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.

wfu-slider attribute

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.