“Mega Slider Widget” helps you to easily turn any Elementor sections into slider slides. Now you can amaze your website visitors with jaw-dropping slider designs that look amazing on any device. You can use sections as slider items and design with no limits. You can use also use the built-in Entrance Animations provided in Elementor to animate the layers when each slide loads to the page. It also supports the advanced options like Remote Control and Sync with other widgets.
Let’s look at each of the options in the “Mega Slider Widget” below.
Install Mega 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 “Mega Slider“
- Hover over the widget in the search results and click install
- Add your “Mega Slider” widget to any Elementor Page
How it works? #
To set up the Mega Slider is very simple- each item in the Mega Slider can be connected to Elementor section by ID. The sections can come from the current page or from an external Elementor template. Step-by-step tutorial is as below.
Option 1: Add sections to the Mega Slider #
Design two or more Elementor sections using the page builder. After this you need to go to the advanced settings of a section that you created >> give the section a CSS ID. You can create as many sections as you need for you Mega Slider.
Add items to your Mega Slider. Each item should have a corresponding section ID.
Go to Mega Slider Settings>>>Go to slider items settings>>>In Section ID option, add name for section.
Option 2: Use Template in Mega Slider Sections #
Go to Templates in the WordPress side menu >> Add new >> Select the template type as page and give your Template a name. Add all the sections to your template and give each section an ID.
Go to >> Template in “Mega Slider” Settings :
Choose any template for slider sections
Carousel Settings #
Autoplay
Set the autoplay option on or off.
Slide Duration
Set the slide duration in milliseconds.
Loop
Turn on or off the loop option.
Autoplay Hover Pause
Autoplay will pause on mouse hover.
Mouse Drag
Carousel can be dragged with mouse.
Touch Drag
Slider can be dragged with touch swipe.
Show Arrows
Show/Hide the arrows.
Left Arrow Icon
Choose an icon for left arrow.
Right Arrow Icon
Choose an icon for right arrow.
Show Bullets
Show/Hide the navigation bullets.
Animation
Select the animation from the given options.
- None
- Fade In Out
- Fade In Left Out Right
- Fade In Left Out Right Big
- Fade In Right Out Left
- Fade In Right Out Left Big
- Fade In Out Up
- Fade In Out Up Big
- Fade In Out Down
- Fade In Out Down Big
- Slide In Left Out Right
- Slide In Right Out Left
- Slide In Out Up
- Slide In Out Down
- Zoom In Out
- Zoom In Out Down
- Zoom In Out Left
- Zoom In Out Right
- Zoom In Out Up
Testing and Tools #
Show Errors
Show if have any errors
Debug Available Item Ids
Show debug in items
Debug Items Elements Ids
Show debag in elements
Hide Sections in Editor
Don't Hide
Hide
Hide with message
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.
Items Settings #
Title
Type a title for slider item.
Section ID
Type the section id of the section to display as slider item.
Nav Arrows Styling #
Set the nav arrow spacing, position, arrow radius, icon size, nav arrow background, icon color, icon color hover.
Nav Bullets Styling #
Style the nav dots size, color, spacing, and alignment.
Usage Examples #
Here are some live use cases for the Mega Slider Widget.
