Premium Carousel Widget for Elementor provides a solution to build awesome carousels with many features. Carousel Widget for Elementor can be used to organize your content easily (It doesn’t require any coding skills to build one).
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. Also, adding dots and/or arrows to navigate throughout the carousel’s slides.
Click here to check Premium Carousel Widget demo.
- You will need Premium Addons free plugin installed and activated on your website.
- Also, make sure that this widget/addon 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 Elementor Template, to add them to Premium Carousel Widget.
- Templates —> Add New
- Select the type of template you want to work on.
- Give your template a name.
- Start building your own unique template.
Key Features – Elementor Carousel Widget
- Slides’ Settings
- Additional Settings
Carousel Elementor Widget
Start by adding/inserting the templates which 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 Elementor Carousel Widget.
- Select Field
- Templates: The content you choose to add into Carousel Widget for Elementor. Each template will be displayed on a single slide.
- 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.
- Dots: Enable or disable Navigation Dots on carousel.
- Position when Dots are Enabled: It displays navigation dots Below Slides, or On Slides.
- 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.
- Appearance: how the templates will display when the carousel slide, 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 All Visible option means, 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, when you click on 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, Laptops.
- Tabs Slides: number of templates that will display on Tablet screens.
- Mobile Slides: number of templates that will display Mobile Screens.
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. Slides’ Settings
Slides’ Settings: choose how Carousel Widget for Elementor will appear to your visitors.
- 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: Enable zoom transition between slides.
- Transition Speed: Set the speed of navigation. Value is set in milliseconds(ms) [1 second = 1000 milliseconds].
- Autoplay Speed: Set the time at which the next slide will display (come). Value is set in milliseconds(ms).
- Extra Class: set class names that can be used to apply further customization on the Elementor Carousel Widget.
3. Additional Settings
Additional Settings to extend Elementor Carousel Widget features.
- 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.
- 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, tablet layout will appear ( Default: 1025px)
- Mobile Breakpoint: set the breakpoint between tablet and mobile devices. Under this breakpoint, mobile layout will appear ( Default: 768px)
Set the Styles for Elementor Carousel Widget Navigation Arrows and Navigation Dots.
Note: Make sure to switch on the navigation arrows and/or navigation dots from the content tab to be able to see the styling options of those controls.
- Custom Previous Icon: Set the custom icon for the prev arrow, you can use the font awesome library or upload your SVG file.
- Left Icon: Set the navigation arrow icon for the left arrow.
- Custom Next Icon: Set the custom icon for the next arrow, you can use the font awesome library or upload your SVG file.
- Right Icon: Set the navigation arrow icon for the right arrow.
- Size: set the size of arrows 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 arrows background. For example, 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.
- 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 navigtion 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 color for the inactive ripple effect.