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