👀
Splitter by Delta clan
  • Getting Started
Powered by GitBook
On this page
  • Cloneable:
  • Installation
  • Webflow Attributes
  • Splitter Container
  • Before
  • After
  • Handle
  • Anatomy of a Splitter

Getting Started

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

Last updated 2 years ago

Cloneable:

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>

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

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

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