Carousel Widget Tutorial

Intro

Premium Addons for Elementor provides a solution to build awesome carousels with many features. Carousel Widget for Elementor can be used to organize your content easily with many different styles.

Premium Carousel Widget allows you to create carousels for Testimonials, Images, Media, and many other types of content. Using Carousel Elementor Widget you will be able to build the carousel to slide templates vertically or horizontally.

Take a look on the Premium Carousel Widget demo.

Requirements:

• You will need the Premium Addons free plugin installed and activated on your website.
• Also, make sure that this widget is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Create Elementor Template

Create an Elementor Template, to add them to the Premium Carousel Widget.

• From your WordPress dashboard navigate to Templates —> Add New.

• Select the type of template you want to work on.

• Give your template a name.

• Start building your own unique template.
• Once you finish building the template click Publish.

Key Features

• Carousel
• Navigation
• Slides Settings
• Advanced Settings

1. Carousel

Start by adding/inserting the templates that you have created before to the Carousel widget.

• Content Type: is how Elementor Templates are selected [inserted]. There are two types of content available in the Elementor Carousel Widget.
  • Select Field
  • Repeater

• Templates: The content you choose to add to the Carousel Widget for Elementor. Each template will be displayed on a single slide.
  • You can use the Elementor Live Templates feature to create/edit the Elementor templates on the same page. For more information, check the Elementor templates article.
  • You can also select an existing Elemntor template.

• Custom Navigation Element Selector: Use this to add an element selector to be used to navigate to this slide. For example #slide-1. Please refer to this article for information about this option.

• Type: Set a navigation type for your Carousel. You can make Elementor Carousel Widget slide horizontally or vertically.

• Appearance: how the templates will display when the carousel slides, All Visible or One at a time.
  • All Visible: By selecting this option, you will make the Carousel scroll the number of templates that you have specified for Desktop Screens, Tab Screens, and Mobile Screens. For instance, if you have added 6 templates to the Carousel Widget, and you specified 3 templates to appear on Desktop screens, then the All Visible option means, that when you click on the navigation arrow or navigation dot, the Carousel will scroll 3 templates after 3 templates.
  • One at a time: By selecting this option, you will make the Carousel scroll one template at a time for all [Desktop, Tab, and Mobile] Screens. For instance, if you have added 6 templates to the Carousel Widget, and you specified 3 templates to appear on Desktop screens, then the One at a time option means, that when you click on the navigation arrow or navigation dot, the Carousel will scroll one template each time the carousel slide.

• Desktop Slides: the number of templates that will be displayed on Desktop screens, such as PCs and laptops.
• Tabs Slides: number of templates that will display on Tablet screens.
• Mobile Slides: number of templates that will display Mobile Screens.
• Use With Magic Scroll: Enable this option if you want to animate the carousel using Magic Scroll addon. If your not sure how to do that please check this article for more clarification.

Note: You can set different values for each screen. For example, you can set the Carousel Widget to display 3 slides on Desktop , and 2 slides on Tabs, 1 slide on Mobile, to make Elementor Carousel Widget appearance more responsive and better on all screens.

2. Navigation

• Navigation: The carousel widget includes 6 navigation options (None, Dots, Slide Index, Progress Bar, Animated Progress Bar).
• Position (when Dots are Chosen): It displays navigation dots Below Slides, or On Slides.
  • Horizontal Offset when On Slides position chosen: Adjust the Horizontal offset position of the dots in pixels, em, and %.
• Vertical Offset: Adjust the Vertical offset position of the dots in pixels, em, and %.
• Ripple Effect: adds a ripple effect when the active navigation dot is hovered/clicked.
• Arrows: Enable or disable carousel navigation arrows.

3. Slides Settings

• Infinite Loop: Enable or disable the ability of the Carousel Elementor Widget to slide continuously.
• Fade: Enable or disable fade transition between slides.
• Zoom Effect when Fade is enabled: Enable zoom transition between slides.
• Transition Speed: Set the speed of navigation. Value is set in milliseconds(ms) [1 second = 1000 milliseconds].
• Autoplay Slides: Enable if you want the Slide to start automatically.
• Autoplay Speed: Set the time at which the next slide will display (come). Value is set in milliseconds(ms).
• Extra Class: Add an extra class name that will be applied to the carousel, and you can use this class for your customisations.

4. Advanced Settings

• Draggable Effect: Enable or disable the slides to be dragged by mouse click.
• Touch Move: Enable or disable the slide moving with touch.
• RTL Mode: Enable or disable the RTL Mode that can be used for some languages that are written from right to left, such as Arabic and Hebrew.
• Variable Width: Allows each slide to have a different width.
• Adaptive Height: This option gives each slide a fixed height to avoid huge white space gaps within the Carousel Elementor Widget slides.
• Pause on Hover: Enable or disable pause Carousel Elementor Widget slider on mouse hover.
• Center Mode: Enables a centered view for one of the slides with partial next/previous slides. [Note: Animation and all visible scroll types don’t work with this option].
• Slides Spacing: Set a spacing value in pixels [when Center Mode is enabled], so you can set how much partial view from the next/previous slides should appear.
• Tablet Breakpoint: Set the breakpoint between desktop and tablet devices. Under this breakpoint, the tablet layout will appear ( Default: 1025px)
• Mobile Breakpoint: Set the breakpoint between tablet and mobile devices. Under this breakpoint, the mobile layout will appear ( Default: 768px)
• Linear Easing: Makes the transition between slides linear.

Style

Set the Styles for Elementor Carousel Widget Navigation Arrows and Navigation Dots.

Note: Make sure to select a navigation type and enable navigation arrows from the navigation tab to be able to see the styling options of those controls.

1. Navigation Arrows

• Custom Previous/Next Icon: Set a custom icon for the arrow, you can use the font awesome library, upload your SVG file, or choose none to not show any icons.
• Left/Right Icon: Set the navigation arrow icon for the arrow.
• Size: Set the size of the arrow icons for different devices. So, you can set a specific size for each screen view (Desktop, Tablet, and Mobile).
• Position(PX): Set the position of arrows, in pixels.
• Normal/Hover: You can add a different style to both modes such as changing the color, background color, etc.
  • Color: set the color of navigation arrow icons.
  • Background Color: set background color for the navigation arrow icons.
  • Border Type: set the border type for the navigation arrow’s background. You can set the border type for the navigation arrows to None (default), Solid, Double, Dashed, and Groove.
    • Width: Set border width.
    • Color: set color for Border Type.
    • Border Radius: set Border Radius using pixels, percentage, or em. The higher border radius means a more circular border.

2. Navigation

Dots

• Icon: Set the shape of the Navigation Dots.
• Custom Icon: Set the custom icon for the Navigation dots, you can use the font awesome library or upload your SVG file.
• Size: Set navigation dots icon size in px or em.
• Color: Set the color of the Navigation Dots icons.
• Active Color: Set the color of the Navigation Dots icon when it is active (active slide).
• Active Ripple Color: Set color for the active ripple effect.
• Inactive Ripple Color: Set the color for the inactive ripple effect.

Slide Index

• Separator Spacing: Set the separator spacing in px or em.
• Typography.
• Color: Set the color of the index text.
• Separator Color.
• Active Color: Set the color of the active index.

Progress Bar/Animated Progress Bar

• Height: Set the height of the bar in pixels.
• Fill: Choose the filling of the bar. It can be a solid/gradient color or an image.
• Base: Choose the base style for the bar. It can be a solid/gradient color or an image.

If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.