Getting Started

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

Cloneable:

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>

⚡ Splitter is only 0.61kb gzipped, so don't worry about page performance! 💖

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.

Attribute: dc-splitter = "splitter"

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

Attribute: dc-splitter = "before"

marks the container that will house the 'before' elements

Attribute: dc-splitter = "after"

marks the container that will house the 'after' elements

Attribute: dc-splitter = "handle"

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

Last updated 2 years ago