Getting Started

Unlimited before/after sliders for your Webflow site. Display image, video, CMS content and whatever your heart wants 💖

Cloneable:

https://webflow.com/made-in-webflow/website/dc-splitter

Installation

Copy the following script and paste it inside <head> tag of your page (Image 1). 

<!-- Splitter by Delta Clan -->
<script defer src="https://cdn.jsdelivr.net/npm/@deltaclan/splitter@1/dist/splitter.js"></script>

Webflow Attributes

You just need 4 attributes to make this work!

1. dc-splitter = "splitter" marks the container that will be used as a 'slider'

2. dc-splitter = "before" marks the container that will house the 'before' elements

3. dc-splitter = "after" marks the container that will house the 'after' elements

4. dc-splitter = "handle" marks the element that will be the 'handle' of the slider, which will be dragged.

Splitter Container

Attribute: dc-splitter = "splitter"

marks the container that will be used as a splitter component. This will house the before ,after , handle elements.

Before

Attribute: dc-splitter = "before"

marks the container that will house the 'before' elements

After

Attribute: dc-splitter = "after"

marks the container that will house the 'after' elements

Handle

Attribute: dc-splitter = "handle"

marks the element that will be the 'handle' of the slider, which will be dragged.

Anatomy of a Splitter

Last updated