A synchronized slider (often called a “gallery” or “carousel sync”) connects two separate sliders so that moving one moves the other. This is essential for product galleries or detailed presentations.
To solve this, use Div Render Container Slider for Elementor.
Step 1: Create Two Sliders
Create two separate parent Containers on your page.
1. Top Container: This will be your Main View (large images).
2. Bottom Container: This will be your Navigation/Thumbnails.
Step 2: Assign Sync ID
In the Slider Settings for BOTH containers, find the field Sync Group ID (or similar).
Enter a unique text string, for example: my-product-sync.
Crucial: This ID must be identical in both containers.
Step 3: Define Roles
You need to tell the plugin which slider controls which.
1. Top Container: Set Controller Mode to Controlled (it reacts to the other).
2. Bottom Container: Set Controller Mode to Controller (it drives the other).
Alternatively, if the plugin supports bidirectional sync automatically via ID, just setting the ID is enough.
Pro Tips for Syncing
- Slide Count: Ensure both sliders have the exact same number of slides. If they mismatch, the sync logic will break.
- Clickable Thumbs: Ensure the bottom slider allows clicking on slides to jump to them.