1. Home
  2. Docs
  3. Happy Elementor Addons Pro
  4. Premium Widgets
  5. Advanced Slider

Advanced Slider

Need a solid tool to create a stunning slider on your Elemntor website? Take a glimpse at Happy Addons Pro‘s new ‘Advanced Slider’ widget. Now, you can effortlessly make and customize sliders with this completely flexible widget in a more organized way.

Pre-requisites

To use that cool Advanced Slider Widget, you need the following things:

  • Elementor
  • Happy Addons
  • Happy Addons Pro

How To Use Advanced Slider Widget

Let’s check out how to efficiently use the Advanced Slider widget and customize it step-by-step:-

Step: 1

First of all, you need to find the widget from the left sidebar menu. Then drag and drop it onto the selected area.

Add Advanced Slider Widget

Step: 2

In the Content section, you can edit the Slides and Slider Settings of the Advanced Slider.

Content Advanced Slider

Slides

In Content–>Slides, you will get several settings to add and customize your slider slides. Here you can define Slider Type (Single & Multiple), Slider Direction (Horizontal & Vertical), Slider Effect (Slide, Fade, Cube & Flip), Effect Speed, Slides, Height, and Space Between Slides.

Content Slides

Let’s set Content Type, Background Type, Color, Image, Position, Attachment, Repeat, and Size of the slide item.

Add Image Slides

Note: You can also add slide items using the Elementor Save Templates.

Slider Settings

Content–>Slider Settings allow you to define the Content Animation, Animation Speed (ms), Arrow Navigation, Previous Icon, Next Icon, Pagination Type, Scroll Bar?, Scroll Bar, Thumbnail Navigation?, Space Between Thumbs, Infinity Loop? Autoplay?, and Autoplay Speed of the slides.

Content Slider Settings

Step: 3

In Style section, you will find the necessary settings to design your slider. Here they are..

  • Slider Content
  • Icon/ Image
  • Title
  • Sub Title
  • Description
  • Button
  • Navigation – Arrow
  • Scroll Bar
  • Navigation – Thumbnails
Style Advanced Slider

Slider Content

You can also reset the Width, Margin, Padding, Horizontal Align, Vertical Align, Text Align, and Text Shadow of the Slider Content.

Style Slider Content

Icon/Image

Here you can edit Size (px), Padding (px), Bottom Spacing (px), Border Type, Border Radius, Box Shadow, Color, and Background Color of the slider Icon/Image.

Style Icon or Image

Title

You can define the Bottom Spacing (px), Text Color, and Typography of the slider Title.

Style Title

Sub Title

Similarly, you can also set the Bottom Spacing (px), Text Color, and Typography of the slider Sub Title.

Style Sub Title

Description

Same goes for the Description.

Style Description

Button

Style the Padding, Border Type, Border Radius, Typography, and Box Shadow of the slider Button.

Style Button

Navigation Arrow

If you need, you redesign the Position, Padding, Icon Size (px), Border Type, Border Radius, Color, and Background Color of the Navigation Arrow.

Style Navigation Arrow 1

Scroll Bar

You set the Height (px) and Color of the Scroll Bar.

Style Scroll Bar 1

Navigation Thumbnails

You define the Top Spacing (px), Alignment, Height, Width, and Border Type of the Navigation Thumbnails.

Style Navigation Thumbnails

Step: 4

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Give a read to this Document to know more about advanced features & functions.

Advanced Setting of Advanced Slider

Here is the final preview of the Advanced Slider widget.

Final Preview of Advanced Slider

Enhancement in Advance Slider in Version v2.6.1 – 18 October 2022

Using this version, you can now set the arrow’s position outside the slider sections.

image

Note: if you add more distance to the arrow, you have to manually make it responsive by decreasing its distance.

That’s it.

Was this article helpful to you? Yes No

How can we help?