V4 Elements Nested Slider Estimated reading: 7 minutes 8 views A slider where every slide is a free canvas. Put text, images, buttons or anything you like on a slide, then let visitors move through them with arrows, dots or a swipe. No code needed. WIDGET Nested Slider EFFECTS Slide, Coverflow, Card, Perspective, Marquee PLAN Free A QUICK LOOK What You Will Build A customer reviews slider. Click the arrow and the next review slides in. This one started from a ready-made preset, so it took one click. Clicking the next arrow moves to the next review BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Nested Slider is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Nested Slider under Slider Widgets and switch it on. Click Save Settings. The Nested Slider card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the slider in. Click the + button at the top left to open the Elements panel. Look under AAE General for Nested Slider. Drag it onto your page. The Nested Slider in the Elements panel (click to zoom) Tip: Can not see it? Type Nested Slider in the search box at the top of the panel. Note: A new slider comes with one slide, the arrows, the dots and a small counter at the bottom. STEP 3 Start from a Preset (Optional) Do not want to design a slider from zero? Start from one of eight ready-made presets. They come with real layouts, text and pictures that you can replace. Select the Nested Slider. In the General tab, open Presets. Click Apply a preset. Click the one you like. The eight presets (click to zoom) Note: A preset replaces your slides with its own. Pick a preset first, then write your own content. Author-Quote Combo Card A quote with a round author photo. brand-slider A strip of brand logos. Testimonials – Clerk slider A picture on the left and a quote on the right, with arrows. crm-testimonial Three testimonial cards with stars. Fairstone reviews Review cards with green stars and arrows. This is the one used above. Image carousel – arc A row of photos. It comes in several looks, see the effects below. interior-design-studio A large quote with a small author line. Real Homes, Real Impact A picture card with a quote and round arrows. STEP 4 Add, Copy and Reorder Slides Each slide is one box that you fill with your own things. Manage them in the Slides section. Open Slides in the General tab. Click the + button to add a slide. Drag a slide by its dots to change the order. Click the copy icon to duplicate a slide. Click the x to delete it. Add (1), a slide (2), copy (3) and delete (4) (click to zoom) Tip: Style one slide the way you like, then copy it. The new slide has the same look, so you only change the words. STEP 5 Fill the Slides A slide is a free canvas. Open the Structure panel to see how it is built, and click any part to edit it. Open the Structure panel. It is the little layers icon at the top right. Open the slider. You will see the Slider Track with your slides, and the Slider nav with the arrows and dots. Open a slide and click a Heading or a Paragraph to change the words. Drag any other element, like an image or a button, into a slide. The Slider Track (1), the slides (2) and the Slider nav (3) (click to zoom) STEP 6 Choose How It Moves Open Slider Settings. The General tab has the main options. Some options only show for some effects. Choose a Slider Effect. See the pictures further down. Set Slides Per View: how many slides show at once. Set Slide Gap (px) for the space between slides. Switch Infinite Loop on if you want the slider to go around forever. Turn on Autoplay if you want the slides to move by themselves. Effect (1), Slides Per View (2), Gap (3), Center Mode (4), Infinite Loop (5) and Autoplay (6) (click to zoom) Tip: Slides Per View is 3 by default. Set it to 1 if you want one slide at a time. STEP 7 Fine Tune (Optional) The Advanced tab has the speed and the feel. Peek %: shows a little of the next slide at the edge, so visitors know there is more. Slider Easing: how the movement starts and stops. Power 2 is the default. Others are Power 1, 3, 4, Elastic, Back, Bounce and Expo. Transition Speed (ms): how long a move takes. 680 is the default. Peek (1), Easing (2) and Transition Speed (3) (click to zoom) EFFECTS The Five Slider Effects Choose the look in Slider Effect. Here is the same set of photos in each effect. Autoplay is on in these examples, so you can see the movement. Slide The default. Slides move side to side. The Slide effect Perspective The slides on the sides tilt back, like a row going away from you. The Perspective effect Coverflow 3D The middle slide is big and the side slides turn away from it. You can set the Rotate (deg) and the Depth (px). The Coverflow 3D effect Card 3D The side slides lean like cards in a hand. You can set the Card Scale and the Card Tilt. The Card 3D effect Marquee (Continuous Scroll) Slides roll by in a steady line, like a news ticker. The Marquee effect RESULT Final Result The reviews slider on a live page. Each card has stars, a short review and the name of the customer. Click the arrows to see the next review. The reviews slider on the live page SETTINGS Options Slider Effect Default: SlideSlide, Perspective, Coverflow 3D, Card 3D or Marquee. Slides Per View Default: 3How many slides show at once. Slide Gap (px) Default: 0Space between slides. Slide Height (px) Default: 0A fixed height for every slide. 0 means the height fits the content. Center Mode Default: OffPuts the active slide in the middle. Infinite Loop Default: OffGoes around again after the last slide. Slider Overflow Default: VisibleShow or hide the part of the next slides that sticks out of the slider. Autoplay Default: OffMoves by itself. You can set the speed (default 3000 ms), a start delay and the direction. Pause on Hover Default: OnStops autoplay while the mouse is on the slider. Peek % Default: 0Shows a little of the next slide. Slider Easing Default: Power 2How the movement feels. Transition Speed (ms) Default: 680How long one move takes. ID Optional CSS ID for the slider. GOOD TO KNOW More Details Anything on a slide A slide is a normal box. You can add headings, text, images, buttons and more. Arrows, dots and counter They are separate parts under Slider nav. Click one in the Structure panel to restyle or delete it. Some options appear only for some effects For example the Rotate and Depth options show only for Coverflow 3D. Presets first Apply a preset before you write your content. HELP Troubleshooting I do not see the Nested Slider in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Nested Slider. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. My slides sit side by side in the editor This is normal while you edit. The slides are shown in a line, and only the first one shows on the live page when Slides Per View is 1. I see three slides at once but I want one Set Slides Per View to 1 in Slider Settings. My text is too big or too small Click the text in the Structure panel, open the Style tab and set the size and color. Your site may have its own default for paragraphs. I want the slider to move by itself Open Slider Settings and switch Autoplay on. You Did It Your page now has a slider that shows your content one slide at a time. If you face any problem, please contact our support team. We are happy to help.
