Skip to content
Help Center
  • Pricing
  • ProductsExpand
    • Premium BundlesGet all the tools you need in one bundle
    • Kadence ThemeLightning-fast performance theme for modern websites
    • Kadence BlocksDrop in ready designs with advanced controls for pixel perfect websites
    • Kadence Shop KitCreate a more effective WooCommerce shopping experience
    • Kadence ConversionsBoost sales and build engaged audiences with popups and banners
    • Kadence InsightsEasily create A/B tests. Optimize your pages to drive higher conversions.
    • View All Products
  • AI Starter Templates
  • Blog
  • SupportExpand
    • Help CenterProduct Questions? Not sure how to do something? Start here
    • Support TicketsNeed help? We love to help our customers
    • About usCrafted with love in Missoula, Montana
    • Contact usPre Sale Questions? Need help purchasing?
Account Account
Get Kadence
Kadence Blocks
  • Features
  • Pro
  • Blocks
  • HelpExpand
    • Documentation
    • Submit a Ticket
    • Facebook Group
    • Feature Requests
    • Roadmap
    • Changelog
Help Center
Kadence Blocks

Kadence Blocks

  • Table (Adv) Block
  • Create a Full Screen Landing Page
  • How to use Popup Modal Filters with Advanced Query Loops
  • Integrating Kadence Forms with Mailchimp
  • Site Identity Block
  • Search (Adv) Block
  • Using Advanced Header / Navigation Blocks vs Kadence Theme Header Builder
  • The Kadence Visual Builder & Off Canvas Settings
  • The Kadence Navigation (Adv) Block
  • The Kadence Navigation Link Block
  • The Kadence Header (Adv) Block
  • Google Maps Block
  • Integrating Kadence Forms with Mailerlite
  • Repeater Block
  • Accordion Block
  • Progress Bar Block
  • Form (Adv) Block
  • Gallery (Adv) Block
  • Section Block
  • Product Carousel Block
  • Image (Adv) Block
  • Buttons (Adv) Block
  • Count Up Block
  • Table of Contents Block
  • Lottie Animation Block
  • Show More Block
  • Posts Block
  • Countdown Block
  • Tabs Block
  • Row Layout Block
  • Form Block
  • Info Box Block
  • Spacer/Divider Block
  • Icon Block
  • Icon List Block
  • Text (Adv) Block
  • Testimonial Block

Getting Started

  • Kadence AI-Powered Design Library
  • Installing Kadence Blocks
  • Setting custom widths in multi-column Row Layout Blocks
  • How to define a color Palette with Kadence Blocks
  • How to delete/remove a Block
  • How to Duplicate and Copy/Paste Block Styles
  • Setting Block Defaults
  • Kadence Blocks Pexels Integration

Block Tutorials

  • Responsive Breakpoints in Kadence
  • How to use Popup Modal Filters with Advanced Query Loops
  • Using GIFS and Lottie Animations with Kadence Blocks
  • Search (Adv) Block
  • Displaying Shortcodes in the WordPress Editor
  • Integrating Kadence Forms with Mailchimp
  • Advanced Navigation Sub Menus and Mega Menus
  • Building Headers and Footers in Full Site Editing with Kadence Blocks
  • Creating Sticky and Transparent Advanced Headers
  • Getting started with Advanced Header/Navigations
  • Integrating Kadence Forms with Mailerlite
  • Split Content Quick Start Guide
  • How to control the Kadence Design Library
  • Adding Video Backgrounds to Row Layout
  • Pexels Picker
  • Adding Old Wireframes, Starter Packs, and Sections to the New Design Library
  • How to customize the design library color palette
  • Adding a Fullwidth Row
  • Adding Privacy Policy link to Kadence Form
  • Set Equal Column Heights with the Row Layout Block
  • Image Overlay Quick Start Guide
  • Modal Block Quick Start Guide

Pro Addon

  • Custom Queries for Advanced Query Loop Block
  • Kadence Blocks Pro Plugin
  • Advanced Slider
  • Video Popup Block
  • Image Overlay Block
  • Split Content Block
  • Modal Block
  • Dynamic Content
  • Query Loop (Adv) Block
  • Repeater Block
  • Using a Dynamic List Block
  • Dynamic Content: Custom Input and Showing Fields from all Post Types
  • How to Design a Post Grid/Carousel using a Kadence Element
  • Dynamic HTML Block
  • Using Custom SVG Icons with Kadence Blocks
  • Post/Grid Carousel Block
  • Kadence Custom Fonts
  • Post Grid/Carousel Block – Configure a Blog List

Troubleshooting Blocks

  • How to Recover a Broken Block

Advanced

  • Prebuilt Layouts
  • Using Tooltips with Kadence Blocks
  • Custom Queries for Advanced Query Loop Block
  • Adding a Custom Font to Kadence Blocks

Advanced Headers

  • Importing & Exporting Advanced Headers & Navigations
  • The Kadence Header (Adv) Block
  • The Kadence Navigation (Adv) Block
  • The Kadence Navigation Link Block
  • Getting started with Advanced Header/Navigations
  • Getting the most out of Navigation Link Blocks
  • Using Advanced Header / Navigation Blocks vs Kadence Theme Header Builder
  • Creating Sticky and Transparent Advanced Headers
  • Advanced Navigation Sub Menus and Mega Menus
  • Advanced Header Best Practices
  • The Kadence Navigation Builder
  • The Kadence Visual Builder & Off Canvas Settings
  • Building Headers and Footers in Full Site Editing with Kadence Blocks
  • Home
  • Knowledge Base
  • Kadence Blocks
  • Kadence Blocks
  • Pro Addon

Advanced Slider

The Advanced Slider block provides an element that displays content in a slideshow format. This block allows users to view multiple content slides within a single space without taking up too much screen real estate. Advanced Sliders often showcase products or highlight important visual content, such as photographs or graphics.

The Advanced Slider Block is available with Kadence Blocks Pro.

Sample Slide A

Sample Text A

Sample Slide B

Sample Text B

Table of Contents
  • Advanced Slider Block Settings
    • Slider Types
    • General Block Settings
    • Style Block Settings
    • Advanced Block Settings
  • Slide Block Settings
    • Style Block Settings
    • Advanced Block Settings
Advanced Slider

When adding an Advanced Slider Block to a page, the editor presents a Slider with two empty Slides. You have the opportunity to add your images or content by directly adding blocks inside of a Slide.

Adding Slide Content



Press the “Add Slide” button (Plus Icon) on the Block Toolbar to add additional Slides.

Adding Slides

Advanced Slider Block Settings

The Advanced Slider consists of a parent Advanced Slider block and nested Slide blocks. Each block has internal settings you can adjust. This section focuses on the Advanced Slider Block Settings. These settings apply to the Advanced Slider as a whole. Use the Slide Block Settings to customize each Slide individually.

Advanced Slider Block

Slider Types

When viewing the Advanced Slider Block Settings, there are two initial Styles to choose from. One being a regular Slider and the other being a Carousel Slider. These Sliders both differ in design and can be used accordingly. (See the examples below)

Slider Type

Sample Slider Style:

Slider Image

Sample Carousel Style:

General Block Settings

Auto Play: The Autoplay feature allows a Slider to automatically scroll through the available Slides. When this setting is enabled, you can use the Auto Play Block Settings to customize how the Autoplay will work.

Autoplay Speed: This determines the speed at which the Slider will change Slides. The higher the number, the faster/more frequently the Slides will change. These values are measured in milliseconds.

Pause On Hover: This option allows you to Pause the Autoplay feature whenever a user hovers over the Slider.

Slide Transition Speed: This speed determines how long a transition between the previous and the next Slide will be. The higher the number, the longer the transition will take. These values are measured in milliseconds.

Enable Dragging Through Slides: This option allows users to click and drag Slides to navigate through the Slider.

Slider General Settings

When using a Carousel Slider Type, there are additional settings available.

Show Overflow: This option enables your Carousel Slider to overflow, exposing additional Slides. Overflow can occur before and after the main Slider.

Overflow Example

Looping Options: There are two main Looping Options. The Rewind To Beginning option will rewind the Slider from the end back to the beginning when the last Slide is reached. The Endlessly Loop option will re-loop all of your Slides continuously.

Columns: This option allows the number of initial Columns shown on the Slider. If overflow is on, this does not account for Overflow Slides.

Column Gap: This option controls the space between the Slide Columns. It can be adjusted for Desktop, Tablet, and Mobile Devices.

Carousel General Settings

Style Block Settings

Size Mode: This option is only available for the Slider Slide Type. This can be set to a Ratio Responsive size or set to a Fixed Height. If set to a Fixed Height, you will have the option to adjust the Slider Min-Height setting.

Slider Fixed Height

Min Height: This setting adjusts the minimal height the Slider will be. This can be set responsively.

Inner Max Width: This setting adjusts the max width of the content within Nested Slides.

Slider Ratio: When using a Ratio Responsive Size Mode, a Slider Ratio can be set. This can be set to one of many different ratio options available.

Ratio Options


Slider Settings

If using a Carousel Slider Type, the Size Mode setting will be replaced with a Min Height Setting.

Min Height: This setting can be used on Carousel Slider Types to specify a Minimal Height for the Slider/Slides to present at. This can be set for Dekstop, Tablet, and Mobile Devices.

Carousel Style Setting

Arrow Style: This adjusts the style of the Arrows used to navigate the Slider. This can be set to either white on dark, black on light, outline black, outline white, or none.

Arrow Position: This sets the position where your Arrows will be on the Slider. This can be set to either center, bottom left, bottom right, top left, or top right.

Hide Until Hover: When enabled, this option allows you to Hide the Advanced Slider Arrows until the Slider is hovered over.

Slider

Arrow Size: Use the Arrow Size settings to adjust the size of your arrows for Desktop, Tablet, and Mobile Devices.

Arrow Margin: This can be used to add a Margin to your Arrows.

Dot Style: At the bottom of the Slider, there are navigational dots. You can set the Dot Styles either display as dark, light, or none.

Arrow Settings

Advanced Block Settings

Padding: For both Carousel Style types, padding can be added to the Slider for spacing.

Margin: For both Carousel Style types, margin can also be applied to the Slider for spacing.

HTML Anchor: This setting can be used to add an ID #anchor to the Advanced Slider Block.

Additional CSS Class(es): This setting can be used for adding Custom CSS Class(es) to the Slider for further customizations.

Advanced Slider Advanced Settings

Slide Block Settings

Selecting a Child Slide Block gives you access to the Slide settings. Sections include Slide background settings, Slide background overlay, Slide text color, Slide align settings, and other advanced settings.

Slide List View

Style Block Settings

Link Hover Color: Adjust the color of Links that are within the Slide whenever they are hovered over.

Text Color: Adjust the color of Texts within the current Slide.

Link Color: Adjust the initial color of Link Texts that are within the Slide.

Background: The Background can be set to either a Color, Gradient, or an Image.

Type: The Background Type applies if you are not using an Image for the Background. You have the option to select a Color or a Gradient. Depending on your selection, the next setting will display the appropriate color picker.

Background Images: Below the Background Color Options, an Image can be added and used instead. You can upload an Image from the Media Library or insert one from a URL.

Style Slide Settings A

Background Overlay: The Background Overlay presents an overlay color over the current Background.

Type: You can use either a Solid Color or a Gradient Background Overlay Type.

Overlay Opacity: This setting can be used to determine how strong you want the Overlay Opacity to be. With 1 being fully colored and 0 being invisible.

Blend Mode: This setting is set to normal by default and Blend Mode may not be supported in all browsers. You can learn generally about Blend Modes and how they work here.

Content Alignment: This setting can be used to add an Alignment to the inner contents of the Slide.

Vertical Alignment:
This setting can be used to add a Vertical Alignment to the inner contents of the Slide.

Slide Style Settings B

Advanced Block Settings

HTML Anchor: This setting can be used to add an ID #anchor to the specified Slide.

Additional CSS Class(es): This setting can be used for adding Custom CSS Class(es) to the Slide.

Aria Label:
Use the Aria Label Block Setting to add an Aria Label to your Slide, making it more accessible.

Advanced Slide Block Settings
Kadence Blocks Pro PluginVideo Popup Block
  • Pricing
  • Products
    • Premium BundlesGet all the tools you need in one bundle
    • Kadence ThemeLightning-fast performance theme for modern websites
    • Kadence BlocksDrop in ready designs with advanced controls for pixel perfect websites
    • Kadence Shop KitCreate a more effective WooCommerce shopping experience
    • Kadence ConversionsBoost sales and build engaged audiences with popups and banners
    • Kadence InsightsEasily create A/B tests. Optimize your pages to drive higher conversions.
    • View All Products
  • AI Starter Templates
  • Blog
  • Support
    • Help CenterProduct Questions? Not sure how to do something? Start here
    • Support TicketsNeed help? We love to help our customers
    • About usCrafted with love in Missoula, Montana
    • Contact usPre Sale Questions? Need help purchasing?
Account Login
  • Features
  • Pro
  • Blocks
  • HelpExpand
    • Documentation
    • Submit a Ticket
    • Facebook Group
    • Feature Requests
    • Roadmap
    • Changelog