Nested Slider

Nested Slider lets you build smooth, interactive sliders in just a few steps. Once added to your layout, it can display multiple content sections inside a single sliding area. Each slide can hold different elements, so you can design it your way.

Requirement 

• Elementor (Page Builder) 
• Animations Addons (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. 

How To Activate Nested Slider 

1. Go to your WordPress Dashboard. 
2. Click on Animation Addons. 
3. Head to the Widgets Tab.   

Under Advanced, toggle on Nested Slider.

Step 1: Set Up Slides 

First, select the element where you want to add the slider animation. Then, click the ‘+’ icon and type ‘Nested Slider’ into the search box. Once it appears, just click on it.

Next, select any container element or choose a specific one based on your preference. Then, right-click on it and select ‘Copy.’

Now, return to the Nested Slider column interface, click the ‘+’ icon, and paste the container you copied.

Before:

After: 

Repeat the same steps to copy and paste as many slider columns as you like. 

Slides

By clicking on ‘Add Item’, you can add as many slides as you want. However, I’ve added only three.

Step 2: Adjust Slider Controls 

Control how your slider works by setting slide count, autoplay, and navigation options. You can also adjust speed, spacing, direction, and whether the active slide is centered.

Slider Option 

Slides to show: It lets you choose how many slides to add. For example, I selected 3, but you can choose any number based on your preference.

AutoPlay: By toggling ‘Yes’ or ‘No’, you can choose whether the slider plays automatically. I chose No, but it’s up to you. 

Allow touch more: Toggle ‘Yes’ or ‘No’ to enable swipe on mobile and drag on desktop. I chose Yes, but you can pick either.

Logo: Allows you to enable or disable logos on each slide. I chose Yes, but you can choose either.

Mousewheel: Lets visitors scroll through slides using the mouse wheel. I chose to hide it, but you can enable it if you prefer.

Animation Speed: I set the animation speed to 400, but you can choose any value you prefer.

Space Between: Controls the space between each slide. I set the space between to 20, but you can use any value you prefer. 

Navigation: Shows or hides the navigation arrows on the slider. If set to “Show,” you’ll see options to choose icons for the previous and next arrows. I kept it on “Hide,” so the arrows won’t appear.

Pagination: Show or hide pagination indicators. If you select ‘Show,’ you can choose from bullets, fractions, or progress bar. I chose bullets, but you can select any option.

Left/Right Direction: Choose the sliding direction: left-to-right or right-to-left. I picked left, but you can select whichever you prefer.

Center Slide: If turned on, centers the active slide in the middle of the slider. However, i have turned it off.

Final Results 

You Did It 

Your Nested Slider is now ready! You’ve created a smooth, interactive slider that displays multiple content sections. With full control over each slide’s content and settings, your slider is set to enhance your site’s design and user experience. 

Additionally, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.