A “Main Image + Thumbnails” gallery is the gold standard for ecommerce and detailed product pages. It requires two synced sliders working in tandem.

To solve this, use Div Render Container Slider for Elementor.

Step 1: The Main Slider

Create a large Container for the main images.
– Enable Slider Mode.
– Slides Per View: 1.
– Controller Mode: Set to `Controlled` (or leave as None if using ID sync).
– Sync ID: Enter a unique ID like product-gallery-1.

Step 2: The Thumbnail Slider

Create a smaller Container below it with the same images (scaled down).
– Enable Slider Mode.
– Slides Per View: 5.
– Controller Mode: Set to `Controller` (this drives the main slider).
– Sync ID: Enter product-gallery-1 (Must match exactly).

Pro Tips for Thumbnails

  • Clickable: Ensure Slide Clickable is on for the thumbnail slider so users can jump to a specific image.
  • Active State: Use CSS to highlight the active thumbnail (e.g., a border or opacity change) so users know which image is currently selected.