WPMet Site Logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
WPMet Site Logo
Popular Search headermenumegafootermetform

Getting Started With ElementsKit

  • How to Purchase, Install, and Activate ElementsKit Pro
  • Modules of ElementsKit

ElementsKit General Widgets

  • Social Media Widget
  • Advanced Accordion
  • Creative Button
  • FAQ
  • Progress Bar
  • Testimonial
  • Dual Button
  • Social Share
  • Unfold
  • Advanced Toggle
  • Google Map
  • Popup Modal
  • Breadcrumb
  • Image Swap
  • Lottie Animation
  • Back to Top
  • Heading Widget
  • Button Widget
  • Team
  • Accordion
  • Tab
  • Advanced Tab
  • Timeline Widget
  • Advanced Chart
  • ElementsKit Table Widget
  • Motion Text
  • Hotspot
  • Gallery
  • Woocommerce Product Carousel
  • Client Logo
  • Image
  • FunFact
  • Countdown Timer
  • How to Create Image Box Using ElementsKit
  • Create Image Accordion Using ElementsKit
  • Icon Box
  • Pie-Chart
  • Pricing Table
  • Video
  • Image Comparison
  • Drop Caps
  • Business Hours
  • Header Search
  • Tablepress
  • ElementsKit Advanced Slider
  • WhatsApp Widget
  • Image Hover Effect
  • Image Hover Effect
  • Image Morphing
  • Video Gallery Widget
  • Stylish List
  • Flip Box
  • Audio Player
  • Team Carousel Slider
  • Content Ticker
  • Coupon Code Widget

ElementsKit Modules

  • Header & Footer Builder
  • Sticky Content Module
  • Parallax Effects
  • Mega Menu Builder
  • One Page Scroll
  • Widget Builder
  • Facebook Messenger
  • Cross-Domain Copy Paste Module
  • Advanced Tooltip Module
  • Conditional Content Module
  • ElementsKit Icon Pack
  • Google Sheets Module
  • Reset Button Module for Elementor Pro Form
  • Masking Module
  • Particles Module

WP Posts

  • Post Tab
  • Post List
  • Category List
  • Create Post Grid Using ElementsKit
  • Blog Posts

Header Footer Widgets

  • Header Off-canvas
  • Vertical Mega Menu
  • Page List
  • Header Info
  • Nav Menu

Form Widgets of ElementsKit

  • Contact Form 7
  • Caldera Form
  • We Forms
  • Wp Forms
  • Ninja Forms
  • Fluent Forms
  • Mailchimp

Social Media Feeds

  • Twitter Feed API
  • Dribble Feed
  • Behance Feed
  • Facebook Feed API
  • Instagram Feed API
  • Pinterest Feed

Meeting Widgets

  • Zoom Integration

Review Widgets

  • Facebook Review
  • Yelp

Woocommerce Widgets

  • Woocommerce Product List
  • Woocommerce Category List
  • Woocommerce Mini Cart
  • Woocommerce Product Carousel

ElementsKit Settings

  • How to use ElementsKit Widgets
  • Ajax Load Feature of Mega Menu

How to translate ElementsKit pages

  • How To Translate ElementsKit Pages With WPML
  • How to translate Elementskit Header Footer and Advanced Widgets with WPML
  • Translate ElementsKit Elements containing Sub-Elements
  • Home
  • Doc
  • ElementsKit
  • ElementsKit General Widgets
  • ElementsKit Advanced Slider

ElementsKit Advanced Slider

Table of Contents
  • How to add Advanced Slider in Elementor in 6 steps
  • Step 1: Enable the Advanced slider widget of ElementsKit
  • Step 2: Drag and drop the Advanced slider widget
  • Step 3: Add Slider
  • Step 4: Add Contents to Sliders
  • Step 5: Configure and Style Advanced Slider in Elementor
    • 5.1 General
    • 5.2 Settings
    • Slider Effect Style
    • Slider Direction Type
    • Slides Per View
    • Pagination Show
    • Thumbs Show
    • Mouse Scroll
    • Grab Cursor
    • Auto Play
    • Show Navigation
    • Custom Navigation
  • Step 6: Customize the style settings
  • Step 6: Update and See the preview

The advanced slider widget of ElementsKit empowers you to create advanced-level sliders. By advanced level, we mean you can create any design you want to using the Elementor page builder.

Basically, with this slider, you can have the flexibility you get while creating a page in Elementor except now you can use that flexibility to create amazing sliders. 

How to add Advanced Slider in Elementor in 6 steps #

Learn how to add advanced Slider in Elementor using ElementsKit Advanced slider in just 6 steps.

Step 1: Enable the Advanced slider widget of ElementsKit #

Navigate to ElementsKit ⇒ Widgets, turn on the Advanced slider widget and click on Save changes.

enable advanced slider widget Advanced Slider in Elementor

Step 2: Drag and drop the Advanced slider widget #

Go to the page where you want to add an Advanced slider and click on edit with Elementor to edit the page with Elementor page builder. Then search for “Advanced slider”, and drag and drop the widget with the Ekit Icon.

drag and drop advanced slider widget

Step 3: Add Slider #

By default you will get two sliders, you can always add new sliders. To add a new slider, just click on the +ADD NEW icon. Once the slider is added you can rename it.

Add new slider Advanced slider in Elementor

Step 4: Add Contents to Sliders #

Now it’s time to add content to your slider. For that hover over the widget, here you will find the button navigator which you can choose to select a specific slider. Then click on the first edit icon to edit the slider. In case you want to edit the widget settings then click on the second edit icon.

ElementsKit advanced slider options

Once you click on the edit icon to add content, you should see a new window with the same Elementor page builder interface. Here you can select any layout and add content just like you do while building a page. Once you create and customize your slider, click on update to save then click on the X icon on the top right corner to close the window.

add section and content to sliders

Now add contents to all the sliders using the same process. Choose the slider from the navigator, then add the content. 

edit second slider advanced sliders

You can also add the ready section by ElementsKit. For that, once the widget window opens, click on the Ekit icon. You will find a new window with all the premade pages, templates, and sections of ElementsKit. 

Go to the Section tab, hover on the section you like and to add it to your slider click on insert. Once the section is inserted you can customize it and then click on update to save.

add ekit section to advanced sliders

Follow the above-mentioned steps to add content to all your slides.

Step 5: Configure and Style Advanced Slider in Elementor #

You can configure the Advanced Slider widget under the content tab.

5.1 General #

As said earlier, you can add slides in this section. After adding slides,

  1. You can change the slide name – Title. 
  2. You can also add a Thumb Image for each slider.

*Note: To make the Thumb Image visible, enable the “Thumbs Show” under the Settings section.

5.2 Settings #

Under the Settings section, several options are available to configure the advanced slider in Elementor.

Slider Effect Style #

The ElementsKit Advanced Slider widget has 5 different Slider Effect Styles available. They are Default, Fade, Cude, Flip, and Coverflow.

Slider Direction Type #

You can create Horizontal or Vertical slides using the widget.

Slides Per View #

You can decide how many slides to show on a single view using the Slides Per View feature. If you set the Slides Per View to two or more, adjust the Space Between the slides.

Pagination Show #

Enable the Pagination Show from the Content > Settings section. 

Note: Pagination will only be visible when “Thumb Show” is disabled.

Then move to Style > Pagination / Thumbs. When Pagination is enabled, options for pagination will appear here.

  1. Choose a pagination Dot Color.
  2. Adjust pagination Dot Size.
  3. Select a Dot Border Color and adjust the Dot Border size.
  4. Set the Alignment to the right, left, or center.
  5. Adjust the Border Radius.
  6. Set the Pagination Gap.
  1. Adjust the vertical position of pagination dots using the Vertical Alignment option.

Thumbs Show #

Enable the Thumbs Show option from the Content > Settings section.

Note: Pagination won’t be visible when Thumbs Show is enabled.

Then move to Style > Pagination / Thumbs. When Thumbs are enabled, options for thumbs will appear here.

  1. Set the Alignment to left, right, or center.
  2. Adjust the thumbs’ vertical position with Vertical Align option.
  3. Set the Opacity, Border Type, Border Width, Border Color, and Border Radius. You can set different parameters for “Normal” and “Active” thumbs.
  4. Adjust the Thumbs Height.
  5. Adjust the gap between the thumbs – Thumbs Gap.
  6. Adjust the Offset Gap. 

Mouse Scroll #

The ElementsKit Advanced Slider in Elementor comes with a Mouse Scroll feature. Users can change the slides using the scroller of the computer mouse. Turn the Mouse Scroll feature to on to enable the feature.

Grab Cursor #

An option that lets the user scroll the slides with their mouse cursor. Enable the Grab Cursor option from the Content > Settings section.

On the front end, you can check the cursor scrolling of the Advanced slider.

Auto Play #

You can enable autoplay for the advanced slider in Elementor.

  1. Enable Auto Play under Content > Settings.
  2. When Auto Play is enabled, set the Delay time in milliseconds (ms). 
  3. You can also enable Progress Bar when autoplay is enabled.

You can also customize the Progress Bar styles. To customize its styles, move to Style > Progress Bar. This option will only appear when “Progress Bar” is enabled from settings.

  1. Choose a progress bar Color.
  2. Select a Background Color for the progress bar.
  3. Adjust the progress bar Width.
  4. Set the Height of the progress bar.
  5. Adjust the vertical position with the Progressbar Vertical Align option

**Content Animation with Auto Play**
If you add animations to the slider content, make sure the animation time must be less than the autoplay delay time.

Show Navigation #

You can also show navigation with the Advanced Slider in Elementor.

  1. Enable the Show Navigation feature under Content > Settings.
  2. When enabled, set the Left Arrow Icon and Right Arrow Icon.

You can also customize the Navigation styles. To customize its styles, move to Style > Navigation. This option will only appear when “Show Navigation” is enabled from settings.

  1. Adjust the Width and Height of the navigation arrow box.
  2. Set the navigation Icon Size.
  3. Choose the Icon Color, Background Color, and Border Type for the navigation arrows. You can choose different sets of styles for the “Normal” and “Hover” style.
  4. Set the border radius of the navigation arrows using the Nav Border Radius feature.
  5. Adjust the vertical position of the arrow using the Arrow Vertical Align option.

Custom Navigation #

The Advanced Slider widget supports Custom Navigation for ElementsKit Dual Button widget. 

You can use the Dual Button as slider navigation. To use the custom navigation feature, you have to use the following CSS class:

swiper-custom-nav

To add the custom navigation class

  1. Click on Edit Content for a slide.
  1. Drag and drop the ElementsKit Dual Button widget in the slide content design.
  2. Go to Advanced > Layout section, you will a field for CSS Classes. Add the class “swiper-custom-nav” in the field.
  3. You can customize the button styles if you want.
  4. Now click on the update button

Now you can check that custom navigation is working perfectly with the advanced slider.

Step 6: Customize the style settings #

To customize the slider pagination style click on the Edit icon to edit the entire widget, then move to the Style Tab. Here you can customize the following options:

  • Make Pagination Vertical: Select yes from the dropdown to make the pagination vertical.
  • Pagination Background Color:  Choose a custom color for the pagination background.
  • Size of Bullet Point (px):  Choose the size of the pagination bullet.
  • Pagination Alignment:  You can place the pagination on the left, right, or center.
  • Bottom To Top (px): Choose the position of the pagination. This value will be based on the distance from the bottom.
  • Border Radius: Customize the border-radius.
  • Pagination Gap (px): Select how much gap you want around each bullet of the pagination.
customize style settings advanced slider

Step 6: Update and See the preview #

Finally, click on Update to save the page and click on the preview button to use an advanced slider in Elementor like the one shown below:

elementor advanced slider preview Advanced Slider in Elementor
ElementsKit, ElementsKit pro
What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on December 25, 2022
TablepressWhatsApp Widget
Table of Contents
  • How to add Advanced Slider in Elementor in 6 steps
  • Step 1: Enable the Advanced slider widget of ElementsKit
  • Step 2: Drag and drop the Advanced slider widget
  • Step 3: Add Slider
  • Step 4: Add Contents to Sliders
  • Step 5: Configure and Style Advanced Slider in Elementor
    • 5.1 General
    • 5.2 Settings
    • Slider Effect Style
    • Slider Direction Type
    • Slides Per View
    • Pagination Show
    • Thumbs Show
    • Mouse Scroll
    • Grab Cursor
    • Auto Play
    • Show Navigation
    • Custom Navigation
  • Step 6: Customize the style settings
  • Step 6: Update and See the preview

Get Subscribed Today!

WPMet Site Logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.

Company

About us
Contact us
Support
Blog
Collaborate
Documentation

Resources

Affiliates
Affiliate Area
Privacy Policy
Terms & Conditions
Refund Policy
Login/Register

Our Products

Elements Kit
ShopEngine
GetGenie Ai
Metform
WP Social
Wp Ultimate Review
Wp Fundraising

Follow Us

Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT