BugWP logo BugWP
Back to Community
Home / Community / Plugin → Premium addons for elementor

How to Customize Navigation Arrows and Dots in the Premium Addons Carousel Widget

14 threads Sep 7, 2025 Plugin → Premium addons for elementor

Content

Many users of the Premium Addons for Elementor Carousel widget want to customize the navigation arrows and dots to better fit their site's design. This is a common request, as the default positioning or styling might not always align with a specific layout or aesthetic goal.

Common Customization Requests

Based on community discussions, users frequently want to:

  • Move arrow navigation to a different location (e.g., below the carousel).
  • Change the size of arrows, especially using viewport width (vw) units for responsiveness.
  • Replace default arrow icons with custom SVG images from their media library.
  • Modify the style of the navigation dots, including the active dot.
  • Hide arrows on the first or last slide when the carousel is not set to loop infinitely.

Why This Happens

The Premium Carousel widget offers a range of built-in controls, but it cannot anticipate every unique design requirement. Customizations that fall outside the available options in the widget's settings panel require alternative methods, typically using custom CSS or JavaScript.

Common Solutions

1. Repositioning Arrows with Custom CSS

This is the most common solution for moving arrow navigation. You can add CSS code to your page using the Elementor Custom CSS tab, your theme's customizer, or a child theme. The code targets specific classes used by the widget.

Example: Moving Arrows Below the Carousel

.elementor-widget-premium-carousel-widget .carousel-next {
    right: 45% !important;
}

.elementor-widget-premium-carousel-widget .carousel-prev {
    left: 45% !important;
}

.elementor-widget-premium-carousel-widget .carousel-arrow{
  margin-top: 25% !important;
}

Note: The !important rule is often necessary to override the plugin's default styles. To avoid conflicts between multiple carousels on the same page, you can use a more specific CSS selector. Instead of targeting the general widget class, use the unique ID Elementor assigns to your specific widget, which looks like .elementor-element-abcdefg.

2. Using Custom SVG Icons for Arrows

While this was not always possible, the Premium Addons for Elementor team has added the ability to use custom icons for carousel navigation in version 4.1.3 and later. After updating the plugin to the latest version, you should find new options in the Carousel widget's 'Navigation' section to upload your own SVG icons for the arrows and dots.

3. Hiding Arrows on First/Last Slide

For non-infinite carousels, you can use a custom JavaScript snippet to hide the 'previous' arrow on the first slide and the 'next' arrow on the last slide. This improves the user experience by not showing non-functional buttons. This code can be added using an Elementor HTML widget placed below your carousel widget.

4. Changing the Active Dot Style

As of the time of writing, changing the icon or style of the active navigation dot is not a built-in feature. This type of customization would typically require a more advanced custom code solution.

Important Considerations

  • Plugin Updates: Always ensure your Premium Addons for Elementor plugin is updated. New features, like custom SVG navigation, are often added in updates.
  • CSS Specificity: When adding custom CSS, make your selectors as specific as possible to avoid unintended effects on other page elements. Using the unique Elementor element ID is the best method.
  • Testing: After adding any custom code, thoroughly test your website's layout on different screen sizes to ensure it remains responsive and functional.

By understanding these common issues and their solutions, you can significantly extend the design flexibility of the Premium Carousel widget to create a perfectly tailored experience for your website visitors.

Related Support Threads Support