W3 Relations Carousel for Elementor

W3 Relations Carousel is a feature-rich Elementor addon widget that integrates Elementor’s native Nested Elements API. It enables you to create fully responsive, customizable slick carousels where every slide functions as a native container. You can drag and drop any Elementor widget—headings, images, buttons, forms, nested containers, or custom widgets—directly into any slide.

Key Features

• Native Elementor Nested Elements Support: Drag and drop any Elementor widget directly inside carousel slides.
• Fully Responsive: Configure independent Slides to Show and Slides to Scroll for Desktop, Tablet, and Mobile devices.
• 7 Arrow Navigation Positions: Position carousel arrows anywhere:
  1. Left / Right (Classic sides)
  2. Top Left
  3. Top Center
  4. Top Right
  5. Bottom Left
  6. Bottom Center
  7. Bottom Right
• Custom Navigation Icons: Choose custom SVG or FontAwesome icons for Previous and Next arrows using Elementor Icons Manager.
• Dot Pagination Controls: Toggle dot navigation, customize dot sizes, active colors, normal colors, and top spacing.
• Comprehensive Carousel Settings:
  • Autoplay on/off with customizable Autoplay Speed (ms).
  • Infinite loop toggle.
  • Pause on hover toggle.
  • Customizable Animation Speed (ms).
• RTL Support: Built-in Right-to-Left language compatibility.
• Seamless Editor Experience: Complete editor-side slide scrolling and dot pagination support without breaking Elementor’s drag-and-drop container system.

1. Upload the w3-relations-carousel folder to the /wp-content/plugins/ directory (or upload the .zip archive via Plugins > Add New > Upload Plugin).
2. Activate the plugin through the Plugins menu in WordPress.
3. Open any page in the Elementor Editor.
4. Look for the W3 Relations Carousel widget in the W3 Relations category or search for “Carousel”.
5. Drag and drop the widget onto your page and start adding Elementor widgets into the carousel slides!

1. 

   Elementor Editor experience with native slide containers.

2. 

   Carousel settings panel showing responsive controls and 7 arrow positions.

1.0.4

• Fix: Resolved infinite loop scrolling issue where reaching the last slide item rewound back to the first slide instead of continuously sliding forward.
• Fix: Removed conflicting track flexbox styling to restore native Slick track clone math and seamless infinite transitions on frontend.
• Fix: Implemented seamless infinite loop navigation support in Elementor Editor with visual proxy clones without compromising container drop zones.
• Fix: Resolved mid-transition layout reposition triggers caused by parent container animations.

1.0.3

• Feature: Added border style and border radius controls for carousel navigation arrows.
• Feature: Added left/right position adjustment controls for carousel navigation arrows.
• Fix: Streamlined hover tab controls to prevent duplicate border color pickers.

1.0.2

• Fix: Resolved issue where carousel JS & CSS were not loading on non-Elementor pages when rendered via header container shortcodes.
• Fix: Explicitly enqueued scripts on wp_enqueue_scripts and widget render for seamless shortcode rendering.
• Fix: Improved container margin reset styling for non-Elementor page rendering.

1.0.1

• Fix: Resolved issue where nested widgets inside slide containers were not rendering in the Elementor Editor.
• Fix: Improved active dot state synchronization and smooth scrolling in editor preview.

1.0.0

• Initial release of W3 Relations Carousel plugin.
• Native Elementor Nested Elements API integration.
• Responsive slide settings, 7 arrow positions, and custom styling options.
• Full editor preview and seamless drag-and-drop support.