Slider/Carousel Elementor widget

The Slider/Carousel Elementor widget comes with easy layout management which allows you to add/remove/order the elements you want to display on your slides. Create your hero slider with a background image or video and add a title, description or button. You can choose horizontal or vertical slider direction and manage other flexible options like autoplay, zoom, loop, parallax, cursor type and a lot of other useful things.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

• Content
• Style
• Advanced

Content Tab

On the Content tab of TheSlider Elementor widget, you can manage the general slider settings like source, layout, slide content, navigation and a lot of other things.

Source

Select which type of source you want to use for the Slider/Carousel Elementor widget

• Custom – an option is used to create custom slides with the necessary content for each of them. Once you select this source, a new “Slides” section with settings is displayed on the Content tab, where you can add and configure the required number of elements.
• Posts – an option is used to display posts of a certain category in the slides. To do this, you need to create posts and assign them to a specific category. After that, select the category in the current settings.
• Custom Posts – an option is used to display custom posts. If your site uses custom post types, this setting will help you display specific posts by selecting them from the list in the current option.
• Sections – an option is used to display the Elementor sections in the slides placed on the current page. Once you select this source, a new “Slides” section is displayed on the Content tab where you can specify a section id for each of the slides.
• WooCommerce – an option is used to display WooCommerce products of a certain category in the slides. To do this, you need to create products and assign them to a specific category. After that, select the category in the current settings.

Link type

The option allows you to apply a link to a specific box element. The available types: Box, Title. Select Note to disable the link. If you select the Button then make sure the button is added to the slider Layout.

Layout

The section of the Slider/Carousel Elementor widget where all elements of the slider layout can be added, configured and ordered.

• Vertical alignment – specify vertical content alignment on a slide.
• Horizontal alignment – specify horizontal content alignment on a slide.
• Display as a background – specify what you want to use as the background of each slide: Image or Video. Select Note to disable the background.
• Title HTML tag– select one of the available tags from the list for the header text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.

To add a new box element, click “Add Item” and select one of the available item types:  Image, Title, Description, Price, Category, Button.

Slider options

• Slider direction – select directions for the slider swiping: Horizontal or Vertical
• Height – specify the height of the slider in different units( px, VH, EM). The field supports responsive settings for desktops, tablets or mobiles.
• Slides per view – specify the number of slides to display per screen. The field supports responsive settings for desktops, tablets or mobiles.
• Space between slides – specify the distance between slides. The field supports responsive settings for desktops, tablets or mobiles.
• Slides to scroll – specify the number of slides you want to scroll with one click.
• Autoplay – the toggle to enable/disable the autoplay feature for the slider. The option allows you to specify the scroll speed, as well as set Pause on hover and Disable on interaction.
• Infinite loop – the toggle to enable/disable the loop feature to scroll the slider endlessly..
• Auto height – the toggle to enable/disable automatic slider height.
• Lazy load images – the toggle to enable/disable the lazy load feature. It makes the page load faster. Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining until it is needed by the user.
• Preload images – the toggle to enable/disable the image preloading feature. It loads images before displaying them so that they can be instantly accessed when needed.
• Grab cursor – the option allows you to enable the Grab cursor type.
• Centered – the option centers one of the carousel elements.
• Free mode – adjust the momentum slider to suit your needs.
• Mousewheel – adjust how the mouse wheel should interact with the slider.
• Parallax – the option allows you to set a parallax background.
• Keyboard control – the toggle to enable/disable keyboard slider control.
• RTL – the toggle to enable/disable right-to-left layout.
• Zoom – the option allow to zoom in an image by pinch gesture and or by zoom in/out by double tap on it.

Slider navigation

• Navigation – choose what type of navigation you want to use: Arrows and Dots, Arrows, Dots. Select None to disable the navigation.
• Thumbs navigation – the option is used to display the navigation as thumbnail images. It is only available for the Source: Gallery.
• Scrollbar – the toggle to enable/disable the scrollbar display on the slider. The option allows hiding the scrollbar when the mouse left.

Slider navigation arrows

Manage the icons for navigation arrows.

• Previous arrow – select the icon for the previous arrow using the icon library or upload your own icon in SVG format.
• Next arrow – select the icon for the next arrow using the icon library or upload your own icon in SVG format.

Slider effects

Section for setting different types of animations and switching effects of Slider/Carousel Elementor widget

• Slider effect – select one of the available effects: Fade, Cube, Coverflow, Flip. Select None to disable the navigation. Note that the “Slider per view” setting will be ignored if the Fade, Cube or Flip effect is set.
• Slide content hover animation – the option allows selecting one of 25+ hover animations.
• Content animation on slide change – the option allows selecting one of 25+ slide change animations.

Style tab

On the style tab, you can manage the element styles of the Slider/Carousel Elementor widget like colors in different states, size, typography, borders, padding/margin, etc.

Slide

• Boxed slide content – the option allows you to control the width of the slide content in different units( %, px). The field supports responsive settings for desktops, tablets or mobiles.
• Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.

NORMAL/HOVER

The style settings for different states.

• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Slide Title/description/button/category/category/price/

• Width – specify the width of the block in different units(px, %). The field supports responsive settings for desktops, tablets or mobiles.
• Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
• Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.

NORMAL/HOVER

The style settings for different states.

• Color– specify the font color and opacity of the text using the color picker.
• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Slide image

• Width – specify the width of the image in different units(px, %). The field supports responsive settings for desktops, tablets or mobiles.
• Height – specify the height of the image in different units(px, %). The field supports responsive settings for desktops, tablets or mobiles.
• Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.

NORMAL/HOVER

The style settings for different states.

• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Next arrow/Previous arrow

• Icon size – specify the size of the nav arrows in different units(px, %).
• Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.

NORMAL/HOVER

The style settings for different states.

• Color– specify the font color and opacity of the text using the color picker.
• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Scrollbar

• Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.

NORMAL/HOVER

The style settings for different states.

• Color– specify the font color and opacity of the text using the color picker.
• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Thumbs

• Width – specify the width of the block in different units(px, %). The field supports responsive settings for desktops, tablets or mobiles.
• Height – specify the height of the block in different units(px, %). The field supports responsive settings for desktops, tablets or mobiles.
• Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.

NORMAL/HOVER/active

• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Advanced Tab

The settings in the advanced tab of TheSlider widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.