“Content Slider Widget” allows you to create responsive slideshows for your WordPress websites. The widget supports diffrent source types such as: Content, Elementor Templates or Just a Background Image. An interactive slider can be created quickly and easily using this widget with the help of its wide range of customization and styling options. The widget also supports advanced options such as Remote Connection and Syncing with other widgets.
Let’s look at each of the options in the “Content Slider Widget” below.
Install Content Slider Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Content Slider“
- Hover over the widget in the search results and click install
- Add your “Content Slider” widget to any Elementor Page
General Settings #
Autoplay
Plays the slides automatically.
Slide Duration
Specify the time after which slides will change.
Loop
On/Off the loop option for slides.
Autoplay Hover Pause
Pause on mouse hover.
Slider Type
Choose slider type from dropdown list.
- Full width slider
- Offset slider
Animate In
You can select a slide-in animation from the drop-down list.
- FadeInLeft
- FadeInUp
- SlideInLeft
- SlideInDown
- BounceIn
- BounceInRight
- RotateIn
- RotateInUpLeft
- RotateInUpRight
- ZoomInDown
- ZoomInLeft
- ZoomInUp
Animate Out
You can select a slide-out animation from the drop-down list.
- FadeInLeft
- FadeInUp
- SlideInLeft
- SlideInDown
- BounceIn
- BounceInRight
- RotateIn
- RotateInUpLeft
- RotateInUpRight
- ZoomInDown
- ZoomInLeft
- ZoomInUp
Ken Burns Effect
Add an image zoom effect to the slides background image.
Layout Settings #
Show or hide elements in content slide
Show Image/Icon
Show/Hide image or icon on slide.
Show Title
Show/Hide Title of the slide.
Show Text
Show/Hide Text on the slide.
Show Button
Show/Hide Button
Show Dots
Show/Hide bullets to navigate carousel.
Show Arrows
Show/Hide Arrows for slide navigation.
Arrows Settings #
Set the arrow icons of the arrow navigation when turned on.
Left Arrow
Choose a icon for Left Arrow
Right Arrow
Choose a icon for Right Arrow
Connected Widgets Settings #
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Show Debug
Display information about remote widgets connected to this widget.
Items Settings #
Manage the slides of the carousel using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set a Title for your slide.
Background Image
Choose any Background Image for the slide.
Background Position
Choose any Background Position from the dropdown list
- Left top
- Left center
- Left bottom
- Right top
- Right center
- Right bottom
- Center top
- Center center
- Center bottom
Content Source
Choose any of the given content sources
- Content
Type any custom content for your slide.
- Template
Choose any of the premade templates to show in your slide.
- None
Button Text
Type any custom text for the button.
Link
Add any URL to link the button.
Content Icon/Image
Choose any Image or Icon to show in the slide.
Content Slider Widget Styling #
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want
General Styling #
Set the height, vertical alignment, horizontal alignment and slider radius of content slides.
Overlay Styling #
Different styling options for overlay image, gradient, and video.
Content Styling #
You can set the background color, border type, border radius, margin, padding, and alignment of the content.
Title Styling #
In this section, set the title’s spacing, color and typography.
Text Styling #
Style the text color, text typography and text spacing.
Button Styling #
Here, you can style the color, typography, border, radius, spacing, etc. of the button.
Nav Arrows Styling #
In this section you can set the spacing, position, radius, icon size, icon color, etc. for Nav Arrows.
Nav Bullets Styling #
You can customize size, color, active color, spacing and alignment of the Nav Bullets.
Content Image Styling #
You can style the content image width, margin and radius.
Content Icon Styling #
In this section, you can style the content icon size, color, background, radius and icon border.
Usage Examples #
Here are some live use cases for the content slider widget.
Example of Content Slider synced with Icon Bullets
Example of Content Slider synced with Content Carousel and controlled by Remote Tabs
