SA5 Slider

Make the most of Webflow's slider element.

This cloneable contains demonstrations of the many feaures in Sygnal's SA5 HTML Library.

We'll continue expanding it with demos as we have time.

Documentation
Video Tutorial
collaboration illustration
DEMO #1

Slide event

SA5's Slider can detect slide change events, and execute a javascript callback that you define.

Here, we simply update this number.

Current slide is #...

‍

‍

Italy

Italy, often referred to as the boot-shaped country, is nestled in Southern Europe and is renowned for its rich cultural history, culinary heritage, and picturesque landscapes.

Greece

Greece, a country in Southeastern Europe, is renowned for its rich history, stunning landscapes, and warm hospitality.

France

France, located in Western Europe, is celebrated for its rich history, artistic influence, and culinary excellence. Its capital, Paris, is often called the "City of Light."

DEMO #2

Smart slider

Use the SA5 action controller buttons at left to navigate the tabs element above it.

  • Works with tabs and sliders
  • First, last, next, prev, nextLoop, prevLoop, and goto item
  • Buttons can target any tabs or sliders on the page. Those within a tab or slide can auto-target their own parent element.

Current slide is #...

How it Works

Italy

Italy, often referred to as the boot-shaped country, is nestled in Southern Europe and is renowned for its rich cultural history, culinary heritage, and picturesque landscapes.

Greece

Greece, a country in Southeastern Europe, is renowned for its rich history, stunning landscapes, and warm hospitality.

France

France, located in Western Europe, is celebrated for its rich history, artistic influence, and culinary excellence. Its capital, Paris, is often called the "City of Light."

Source Code

See the Pen SA5 | Core | Slider Component by Michael Wells (@memetican) on CodePen.