🥞 Waterfall by Wellflow

Waterfall is an attributes-based slider library for quickly creating fully customizable sliders without using Javascript! This library is a wrapper for SwiperJS, which is an excellent open-source package.

Setup

Create an element with class .waterfall

All slider settings will be added as attributes to the element with the .waterfall class.

General Settings

Navigation

Navigation allows for buttons to control moving to previous or next slides. To enable navigation, add the attribute [navigationMode="true"].

Navigation Settings NYI (Not Yet Implemented)

Autoplay

Autoplay advances the slider automatically. To enable autoplay, add the attribute [autoplayMode="true"].

Autoplay Settings delay: parseInt(getAttrOrDefault($this, "delay", 0), 10), disableOnInteraction: parseBool(getAttrOrDefault($this, "disableOnInteraction", false)), reverseDirection: parseBool(getAttrOrDefault($this, "reverseDirection", false)), pauseOnMouseEnter: parseBool(getAttrOrDefault($this, "pauseOnMouseEnter", false)), stopOnLastSlide: parseBool(getAttrOrDefault($this, "stopOnLastSlide", false)),

Webflow Designer Placeholder To have the video display for a preview in the Webflow Designer, you can duplicate the element and change the tag to 'video'. Give the element the attribute [syrup-el='scroll-video-placeholder']

Video Hosting Tips I host my videos on AWS S3 / CloudFront. It's really easy to set up, cheaper than Vimeo, has no ads, and loads quickly.