FlipSlide lets you control how customers interact with your sliders and how they appear when the page first loads. These settings affect the user experience without changing the visual design.
Interaction Mode
There are two ways customers can use your slider:
Drag Mode (Default)
In drag mode, customers click and hold the handle, then drag it left or right to reveal the comparison. This is the most familiar interaction pattern and gives customers precise control over the reveal position.
Drag mode works well for:
- Detailed comparisons where customers want to examine specific areas
- Product close ups where precision matters
- Desktop users who are comfortable with click and drag
Hover Mode
In hover mode, the slider automatically follows the customer's mouse cursor as they move it over the image. There's no need to click or hold anything.
Hover mode works well for:
- Quick, casual comparisons
- Landing pages where you want immediate engagement
- Showcasing the effect without requiring any clicks
To change the mode, select either Drag or Hover from the Interaction Mode dropdown in the slider editor.
On mobile devices, both modes behave similarly since touch interactions naturally involve pressing and dragging.
Start Position
The start position determines where the divider line sits when the slider first loads on the page. By default, it's set to 50%, which means the slider starts right in the middle, showing equal amounts of both images.
You can set this to any value between 0 and 100:
| Position | What It Shows |
|---|---|
| 0% | The divider starts at the far left, showing the full "after" image |
| 25% | Shows mostly the "after" image with a quarter of the "before" visible |
| 50% | Even split (default) |
| 75% | Shows mostly the "before" image |
| 100% | The divider starts at the far right, showing the full "before" image |
Adjusting the start position can be a smart way to draw attention. For example, setting it to 25% on a skincare product page means customers immediately see the "after" result and are encouraged to slide back to discover the "before."
Handle Rotation
Handle rotation tilts the divider line at an angle, measured in degrees. The default is 0 (perfectly vertical). Setting a rotation creates a diagonal comparison effect.
This is a subtle feature that can add visual interest, but it works best with moderate angles. Very steep rotations can look unusual depending on your images.
Which Image on Top
By default, the "before" image is the one that gets clipped (revealed) as the customer drags the handle. The "after" image sits underneath. You can swap this using the Top Image setting.
- Before on top (default): Dragging from right to left reveals the "after" image underneath
- After on top: Dragging from left to right reveals the "before" image underneath
This is mostly a matter of preference and depends on how you want the reveal to feel for your customers.
Related Articles
- Labels, Handle, and Line Options for controlling visible elements
- Customizing Colors and Appearance for visual tweaks
- Creating Your First Slider for a full setup walkthrough