Oct 16, 2019
White Arrow icon
Back to all Elements

Custom Slider

A small upgrade to the normal behaviour of the Webflow Slider Widget.

Using the Slide-In and Slide-Out interactions, and changing the Mask original size, I upgraded each slides behaviour to grow and shrink.

You can clone this project and copy the slider for any use...

Preview:

Share:

Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
White Arrow icon

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
White Arrow icon