Split-screen designs are beautiful: Text on the left, Image on the right. When the user slides the text, the image should slide too. This requires syncing two side-by-side containers.
To solve this, use Div Render Container Slider for Elementor.
Step 1: The Split Layout
Create a main Flexbox Container set to Row (horizontal).
Inside, add two child Containers (width 50% each).
Inside those, add your slider content items.
Enable Slider Mode on BOTH of the 50% width containers.
Step 2: Sync Configuration
1. Left Slider (Text): Set Sync ID to hero-sync. Set Controller Mode to Controller.
2. Right Slider (Image): Set Sync ID to hero-sync. Set Controller Mode to Controlled.
Step 3: Styling
Often, you want different transitions. Set the Text slider to Slide effect and the Image slider to Fade or Cube for a dynamic, mismatched-motion look that feels very high-end.
Pro Tips for Split Screens
- Mobile: On mobile, these 50% columns usually stack. Ensure the sync still makes sense or disable one slider on mobile and hide the other.