Carousel Widget Tutorial

Intro

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.

Requirements:

  • 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.

Creating a New Elementor Template
Create New Elementor Template
  • Templates —> Add New
The Available Content Types in Elementor Template
Choose “Section” as an Elementor Template Type
  • Select the type of template you want to work on.
Name Your New Elementor Template
Give a Name to Your New Template
  • Give your template a name.
Creating Elementor Templates
Start Creating Your Elementor Templates
  • Start building your own unique template.

Key Features

  • Carousel
  • Slides’ Settings
  • Additional Settings

1. Carousel

Carousel Elementor Widget Settings
Premium Carousel Widget for Elementor
Premium Carousel Widget for Elementor

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
    • Repeater
The Available Types of Content in Elementor Carousel Widget
Two Types of Content in Elementor Carousel Widget “Select Field and Repeater”
Repeater Option in Carousel Widget for Elementor
Use “Repeater” as a Content-Type for Your Carousel Widget
Elementor Carousel Widget Settings: Content-Type, Templates, Type of Navigation
Elementor Carousel Widget Settings: Content-Type, Templates, Type of Navigation
  • Templates: are the content you choose to add into Carousel Widget for Elementor. Each template will be displayed on a single slide.
Elementor Carousel Widgets' Navigation Types
Elementor Carousel Widget Navigation Types “Vertical and Horizontal”
  • Type: Set a navigation type for your Carousel. You can make Elementor Carousel Widget slide horizontally or vertically.
The Navigation Tools Included in Carousel Widget for Elementor
Elementor Carousel Widget Navigation Tools “Dots and Arrows”. You Can Use Them Both Together or Use One of Them
  • 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.
Elementor Carousel Widget's Navigation Settings
Elementor Carousel Widget’s Navigation Settings
Appearance Controls' Included in Carousel Widget for Elementor
Appearance and Responsive Settings in Elementor Carousel Widget
  • 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 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.
Carousel Widget Controls
Carousel Widget for Elementor Can Display More Than One Template
  • 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.

Slides' Settings Included in Elementor Carousel Widget
Carousel Elementor Widget 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.
  • 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.

Elementor Carousel Widget's Additional Settings
Additional Settings to Extend Your Elementor Carousel Widget
  • 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 and Slides' Spacing in Carousel Widget for Elementor
Use [Center Mode and Slides Spacing] to Center Elementor Carousel Templates and Display Partials of Previous and Next Templates
  • 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)

Style

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.

Navigation Arrows

Elementor Carousel Widget's Navigation Arrows Styling Controls
Navigation Arrows Styling Options
Navigation Arrows' Styling Options
Set Elementor Carousel Widget Navigation Arrows Styling Options: [Size, Position, Color, Background Color, Border Type, Width, Color, Border Radius]
  • Right Icon/Left Icon: Set the navigation arrows icon, for each the Right Icon and the Left Icon.
  • 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.
Navigation Arrows' Styling Options in Hover Mode
Set Different Stylings for Your Elementor Carousel Widget Navigation Arrows on Hover

Navigation Dots

Navigation Dots in Elementor Carousel Widget
Set Stylings for Navigation Dots for Your Carousel Widget for Elementor
  • Icon: set the shape of the Navigation Dots.
  • 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).
  • Ripple Effect: enable a ripple effect when the active dot is hovered/clicked.
    • Ripple Color: set color for the ripple effect.
  • Border Radius: set border radius to the ripple effect to become rounder.
Ripple Effect in Carousel Widget for Elementor
Enable “Ripple Effect” on Your Navigation Dots Within Your Carousel Widget for Elementor

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.

Close Menu