Full Feature Breakdown for Ultimate Customization

Unlock the complete potential of Slider Future with detailed tools, settings, and design options. Explore every feature that brings your creative vision to life—from advanced animations to seamless integrations—all within the Gutenberg editor.

Slider

Feature	Description	Props	Settings
Slides per view	Number of slides per view in Desktop (1024px). Slides visible at the same time on slider’s container.	– Optimizes visibility and navigation.	_{slidesPerVies 1/10/auto, spaceBetween 0/100, slidesPerGroup 1/10, slidesRows 1/10}
Auto height	Enable and slider wrapper will adapt its height to the height of the currently active slide	– Ensures consistent layout. – Adapts to content size	_{autoHeight, customHeight, responsiveHeight}
Centered Slides	If enabled, then active slide will be centered, not always on the left side.	– Focuses attention on the active slide. – Enhances visual appeal.	_enable
Initial Slide	Sets the initial slide to display when the slider is first loaded.	– Allows customization of the starting point. – Provides control over the slider’s initial view.	_{number 0/9}
Free mode	Enables free mode, allowing slides to be freely dragged without snapping to a specific position.	– Provides a more interactive, hands-on experience. – Allows precise control over slide position.	_enable
Background	Sets the background of the slider, either with a color or an image.	– Customizes the appearance of the slider. – Enhances visual appeal.	_{backgroundColor,} _{backgroundImage, overFlow}
Border	Defines the border’s color, width, and radius for the slider.	– Customizes the slider’s visual edge. – Adds a polished and professional look.	^{borderColor, borderWidth, borderRadius}
Spacing	Adjusts padding and margin for the slider. Padding includes 3 responsive sizes.	– Customizes spacing for a more refined layout. – Optimizes for different screen sizes.	_padding, _margin
Content	Allows customization of the content type, including custom content, post-based, or WooCommerce-based content.	– Flexible content integration. – Supports a variety of content sources (custom, posts, WooCommerce).	_contentType, _content
Global Color Skin	Allows setting default colors for newly added slides, including background, element colors, and block backgrounds.	– Ensures consistent styling across all slides. – Easy customization of color schemes.	_{backgroundColor, textColor, innerTextColor, backgroundBlockColor}
Mouse Effect	Adds different mouse interaction effects, such as Particle, Smoke, Parallax, and Liquid, with individual customizations for each.	– Enhances user interactivity. – Offers a variety of effects to suit different design styles.	_{effectType, effectSettings}
Scrollbar	Customizes the appearance and behavior of the slider’s scrollbar.	– Enhances navigation experience. – Can be styled to fit the design.	_{enable, trackColor,} _thumbColor, _position, _draggable, _{hideAfterInteraction,} _{snapOnRelease,} _height, _borderRadius
Autoplay	Enables automatic sliding after a set interval.	– Enhances user experience with automatic transitions. – Reduces the need for user interaction.	_{enable, delay, autoPlaySettings, disableOnInteraction, pauseOnPointerEnter, reverseDirection, stopOnLastSlide}
Autoplay Progress	Displays a progress bar indicating the autoplay timing.	– Provides a visual cue for autoplay progress. – Improves user experience with a dynamic indicator.	_{enable, color}_, _position
Navigation	Customizes the navigation arrows, including type, color, and visibility across devices.	– Enhances navigation control. – Provides flexibility in design and responsiveness.	_{enable, type,} _color, _colorHover, _{backgroundColor,} _{backgroundColorHover,} _borderColor, _{borderColorHover,} _size, _padding, _borderSize, _{borderRadius,} _position, _sidesOffset, _hideOnClick, _{enableInTablet,} _{enableInMobile}
Pagination	Adds pagination indicators (dots, numbers, etc.) for slide navigation, with customizable styles and positions.	– Improves user navigation and slide tracking. – Fully customizable for different designs.	_{enable, type,} _color, _{colorInactivity,} _{borderRadius,} _position, _hideOnClick, _clickable, _{dynamicBullets, inactivityOpacity,} _width, _height, _activeWidth, _{activeHeight,} _gap
Keyboard Control	Enables slide navigation using keyboard arrow keys.	– Enhances accessibility and ease of navigation. – Provides an alternative control method.	_{enable, onlyInViewport,} _{pageUpDownKeys}
Mousewheel Control	Enables slide navigation using the mouse wheel.	– Provides intuitive navigation. – Enhances user interaction, especially on desktops.	_{enable, forceToAxis,} _{invertScrolling,} _{releaseOnEdges,} _sensitivity
Grab Cursor	Activates a hand cursor that allows users to click and drag to navigate through slides, providing a more intuitive and interactive experience. It is intentionally disabled in the editor!	– Enhances user interaction with visual feedback. – Indicates draggable functionality.	_enable
Effect	Defines the transition effect between slides: Slider, Fade, Cube, Flip, Cards, Coverflow, or Creative.	– Enhances visual appeal with dynamic transitions. – Offers multiple styles to match design preferences.	_{effectType, transitionDuration, effectSettings}
Filter	Applies visual filters to slides, including Classic, Lateral, Central Circle, Border Fade, Vignette, Spotlight, Diagonal, Nebula, Glitch, Prism, and Inverse, with customizable colors.	– Enhances slide aesthetics with creative effects. – Flexible color customization for unique designs.	_{filterType, firstColor, secondColor, thirdColor}
Loop Mode	Controls slide looping behavior with options to Enable, Disable, or Rewind to the first slide after the last.	– Provides seamless, continuous sliding. – Enhances user experience with smooth transitions.	_loopMode
Language	Sets the text direction of the slider to Left-to-Right (LTR) or Right-to-Left (RTL).	– Ensures compatibility with multiple languages. – Enhances accessibility for RTL languages.	_{languageDirection}
Direction	Sets the sliding direction to Horizontal or Vertical.	– Provides flexibility in slider layout. – Adapts to different design needs and content types.	_direction
Design Tools	Enables design aids like rulers and grids with customizable opacity and grid color.	– Assists in precise alignment and layout design. – Enhances visual consistency across slides.	_{rulerEnabled, rulerOpacity, gridEnabled, gridOpacity, gridColor}

Slide

Feature	Description	Props	Settings
Background	Sets the background of the slider, either with a color, image, gradient, or video.	– Customizes the appearance of the slider. – Enhances visual appeal.	_{backgroundColor,} _{backgroundGradientColor}, _{backgroundImage,} _{backgroundVideo,} _{radialEffect,}
Layout	Defines the layout structure of the slider, including element alignment and distribution.	– Provides flexibility to adjust the layout based on design needs. – Enhances user experience with a responsive design.	_{canvasMode, display, contentDirection, justification, verticalAlign, flexWrap, gap, useContentWidth, customWidth}
Spacing	Controls the padding and margin of the slider, with responsive settings for different screen sizes.	– Allows for better spacing adjustments across devices. – Customizable for optimal design consistency.	_padding
Border	Customizes the border of the slider, including color, width, and radius.	– Enhances the visual appeal and definition of the slider. – Fully customizable for different design styles.	_{borderStyle, borderWidth, borderColor, borderRadius}
Filter	Applies visual filters to slides, including Classic, Lateral, Central Circle, Border Fade, Vignette, Spotlight, Diagonal, Nebula, Glitch, Prism, and Inverse, with customizable colors.	– Enhances slide aesthetics with creative effects. – Flexible color customization for unique designs.	_{filterType, firstColor, secondColor, thirdColor}
Divider	Adds a decorative divider between slides with various shapes such as Waves, Curve, Curve Asymmetrical, Triangle, Triangle Asymmetrical, Tilt, Arrow, Split, and Book, each customizable for color, position, size, and width.	– Enhances the visual separation between slides. – Multiple styles to match design preferences.	_{dividerType, height, width, color, flip, invert, position}
Action	Defines the action triggered when a slide is interacted with, such as linking to a custom URL, scrolling to the next slide, or scrolling to a specific page element.	– Enhances interactivity by adding dynamic actions to slides. – Offers flexibility in user navigation.	_actionType, _{target, linkBehavior}
Add Element	Allows the addition of various elements to the slide, including text, images, buttons, icons, and groups.	– Provides flexibility to customize the slide content. – Easily add interactive and visual elements to enhance the user experience.	_addElement

Text Element

Feature	Description	Props	Settings
Content	Allows you to add custom text to the slide.	– Provides flexibility to include personalized content. – Easy to update and manage the text content.	_{contentText, widthContent, customWidthContent, align, elementHtml}
Typewriter Effect	Adds a typewriter-style animation to the text, simulating the appearance of typing.	– Enhances the visual appeal of text content. – Ideal for highlighting important information.	_{content, cursorThickness, pause, speed}
Font	Allows the customization of font size (small, medium, large), font style, family, weight, line height, letter spacing, text color, and background color.	– Provides full control over typography for optimal readability. – Ensures responsive design for different screen sizes.	_{size, style, family, weight, lineHeight, letterSpacing, color, backgroundColor}
Spacing	Allows adjustment of padding and margin around the content.	– Fine-tune layout spacing for better design. – Provides control over the element’s positioning.	_{padding, margin}
Border	Customizes the border of the slider, including style, color, width, and radius.	– Enhances the visual appeal and definition of the slider. – Fully customizable for different design styles.	_{borderStyle, borderWidth, borderColor, borderRadius}
Basic Transform	Allows adjustment of rotation, writing mode (horizontal or vertical), and orientation.	– Enhances visual design with easy transformations. – Provides flexibility in element positioning.	_{rotation, writingMode, orientation}
Advanced Settings	Adjust opacity, z-index, text shadow, box shadow, text stroke, and blend mode.	– Provides advanced styling for fine-tuned design. – Enhances visual effects and layering.	_{opacity, z-index, textShadow, boxShadow, textStroke, blendMode}
Animation	Allows setting various animations like fade, translate, scale, rotate, and more. For text, additional effects such as split text animations are available.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Animation Hover	Allows setting various animations like fade, translate, scale, rotate, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Action	Defines the action triggered when a slide is interacted with, such as linking to a custom URL, scrolling to the next slide, or scrolling to a specific page element.	– Enhances interactivity by adding dynamic actions to slides. – Offers flexibility in user navigation.	_actionType, _{target, linkBehavior}
Visibility	Allows enabling or disabling the element on different devices (desktop, tablet, mobile).	– Ensures content is optimized for all screen sizes. – Controls element visibility based on device type.	_{desktopVisibility, tabletVisibility, mobileVisibility}
Hide in Editor	Allows hiding the element only in the editor to make the design process easier.	– Simplifies the design process by hiding unnecessary elements during editing.	_hideInEditor

Image Element

Feature	Description	Props	Settings
Content	Allows uploading an image or selecting it from the plugin’s internal library. You can also set the image’s alt text, adjust its size, and align it.	– Flexible image management for easy integration. – Enables better accessibility with alt text.	_{imageSrc, widthContent, customWidthContent, align}
Background	Allows setting an image fit and choosing the width and height properties to be auto, fixed, or relative. You can adjust the background’s width and height as needed.	– Customizes background for better layout control. – Flexible options for different screen sizes.	_{imageFit, widthSettings, heightSettings}
Spacing	Allows adjustment of padding and margin around the content.	– Fine-tune layout spacing for better design. – Provides control over the element’s positioning.	_{padding, margin}
Border	Customizes the border of the slider, including style, color, width, and radius.	– Enhances the visual appeal and definition of the slider. – Fully customizable for different design styles.	_{borderStyle, borderWidth, borderColor, borderRadius}
Basic Transform	Allows adjustment of rotation ( rotate, rotate X, rotate Y, perspective)	– Enhances visual design with easy transformations. – Provides flexibility in element positioning.	_{rotate, rotateX, rotateY, perspective}
Advanced Settings	Adjust opacity, z-index, box shadow	– Provides advanced styling for fine-tuned design. – Enhances visual effects and layering.	_{opacity, z-index, boxShadow}
Animation	Allows setting various animations like fade, translate, scale, rotate, and more. Blob mask and Spike mask.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop, blobMask, leftSpike, rightSpike}
Animation Hover	Allows setting various animations like fade, translate, scale, rotate, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Action	Defines the action triggered when a slide is interacted with, such as linking to a custom URL, scrolling to the next slide, or scrolling to a specific page element.	– Enhances interactivity by adding dynamic actions to slides. – Offers flexibility in user navigation.	_actionType, _{target, linkBehavior}
Visibility	Allows enabling or disabling the element on different devices (desktop, tablet, mobile).	– Ensures content is optimized for all screen sizes. – Controls element visibility based on device type.	_{desktopVisibility, tabletVisibility, mobileVisibility}
Hide in Editor	Allows hiding the element only in the editor to make the design process easier.	– Simplifies the design process by hiding unnecessary elements during editing.	_hideInEditor

Button Element

Feature	Description	Props	Settings
Content	Allows you to add custom text to the button.Add Icon inside button.	– Provides flexibility to include personalized content. – Easy to update and manage the text content.	_{contentText, widthContent, customWidthContent, align, addIcon}
Icon	Allows adding an icon inside a button for better visual appeal and user interaction.	– Enhances the button’s clarity and design. – Improves user experience with clear visual cues.	_{icon, position, align, gap}
Font	Allows the customization of font size (small, medium, large), font style, family, weight, line height, letter spacing, text color, and background color.	– Provides full control over typography for optimal readability. – Ensures responsive design for different screen sizes.	_{size, style, family, weight, lineHeight, letterSpacing, color, backgroundColor}
Font Icon	Allows the customization of font size (small, medium, large), color, and background color.	– Provides full control over typography for optimal readability. – Ensures responsive design for different screen sizes.	_{size, color, backgroundColor}
Spacing	Allows adjustment of padding and margin around the content.	– Fine-tune layout spacing for better design. – Provides control over the element’s positioning.	_{padding, margin}
Border	Customizes the border of the slider, including style, color, width, and radius.	– Enhances the visual appeal and definition of the slider. – Fully customizable for different design styles.	_{borderStyle, borderWidth, borderColor, borderRadius}
Basic Transform	Allows adjustment of rotation.	– Enhances visual design with easy transformations. – Provides flexibility in element positioning.	_rotation
Basic Transform Icon	Allows adjustment of rotation.	– Enhances visual design with easy transformations. – Provides flexibility in element positioning.	_rotation
Advanced Settings	Adjust opacity, z-index, box shadow.	– Provides advanced styling for fine-tuned design. – Enhances visual effects and layering.	_{opacity, z-index, boxShadow}
Animation	Allows setting various animations like fade, translate, scale, rotate, and more. For text, additional effects such as split text animations are available.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Animation Icon	Allows setting various animations like beat, fade, beat-fade, bounce, flip, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, duration}
Animation Hover	Allows setting various animations like fade, translate, scale, rotate, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Action	Defines the action triggered when a slide is interacted with, such as linking to a custom URL, scrolling to the next slide, or scrolling to a specific page element.	– Enhances interactivity by adding dynamic actions to slides. – Offers flexibility in user navigation.	_actionType, _{target, linkBehavior}
Visibility	Allows enabling or disabling the element on different devices (desktop, tablet, mobile).	– Ensures content is optimized for all screen sizes. – Controls element visibility based on device type.	_{desktopVisibility, tabletVisibility, mobileVisibility}
Hide in Editor	Allows hiding the element only in the editor to make the design process easier.	– Simplifies the design process by hiding unnecessary elements during editing.	_hideInEditor

Icon Element

Feature	Description	Props	Settings
Content	Allows adding an icon inside a slide.	– Provides flexibility to include personalized content.	_{icon, position, align}
Font	Allows the customization of font size (small, medium, large), color, and background color.	– Provides full control over typography for optimal readability. – Ensures responsive design for different screen sizes.	_{size, color, backgroundColor}
Spacing	Allows adjustment of padding and margin around the content.	– Fine-tune layout spacing for better design. – Provides control over the element’s positioning.	_{padding, margin}
Border	Customizes the border of the slider, including style, color, width, and radius.	– Enhances the visual appeal and definition of the slider. – Fully customizable for different design styles.	_{borderStyle, borderWidth, borderColor, borderRadius}
Basic Transform	Allows adjustment of rotation.	– Enhances visual design with easy transformations. – Provides flexibility in element positioning.	_rotation
Advanced Settings	Adjust opacity, z-index, box shadow.	– Provides advanced styling for fine-tuned design. – Enhances visual effects and layering.	_{opacity, z-index, boxShadow}
Animation	Allows setting various animations like fade, translate, scale, rotate, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Animation Icon	Allows setting various animations like beat, fade, beat-fade, bounce, flip, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, duration}
Animation Hover	Allows setting various animations like fade, translate, scale, rotate, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Action	Defines the action triggered when a slide is interacted with, such as linking to a custom URL, scrolling to the next slide, or scrolling to a specific page element.	– Enhances interactivity by adding dynamic actions to slides. – Offers flexibility in user navigation.	_actionType, _{target, linkBehavior}
Visibility	Allows enabling or disabling the element on different devices (desktop, tablet, mobile).	– Ensures content is optimized for all screen sizes. – Controls element visibility based on device type.	_{desktopVisibility, tabletVisibility, mobileVisibility}
Hide in Editor	Allows hiding the element only in the editor to make the design process easier.	– Simplifies the design process by hiding unnecessary elements during editing.	_hideInEditor

Group Element

Feature	Description	Props	Settings
Content	Allows adding multiple elements inside a group, including text, button, image, and icon.	– Creates a flexible content container for diverse combinations. – Simplifies layout management by grouping elements.	_{addInnerElement}
Background	Sets the background color.	– Customizes the appearance of the group. – Enhances visual appeal.	_{backgroundColor}
Layout	Defines the layout structure of the slider, including element alignment and distribution.	– Provides flexibility to adjust the layout based on design needs. – Enhances user experience with a responsive design.	_{display, contentDirection, justification, verticalAlign, flexWrap, gap, useContentWidth, customWidth,} _elementHtml
Spacing	Controls the padding and margin of the slider, with responsive settings for different screen sizes.	– Allows for better spacing adjustments across devices. – Customizable for optimal design consistency.	_padding
Border	Customizes the border of the slider, including color, width, and radius.	– Enhances the visual appeal and definition of the slider. – Fully customizable for different design styles.	_{borderStyle, borderWidth, borderColor, borderRadius}
Basic Transform	Allows adjustment of rotation.	– Enhances visual design with easy transformations. – Provides flexibility in element positioning.	_rotation
Advanced Settings	Adjust opacity, z-index, box shadow.	– Provides advanced styling for fine-tuned design. – Enhances visual effects and layering.	_{opacity, z-index, boxShadow}
Animation	Allows setting various animations like fade, translate, scale, rotate, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Animation Hover	Allows setting various animations like fade, translate, scale, rotate, and more.	– Offers extensive animation options for engaging visual effects. – Flexible controls for transitions and timing.	_{animationType, opacityFrom, opacityTo, blurFrom, blurTo, effectFrom, effectTo, duration, delay, endDelay, easing, direction, loop}
Action	Defines the action triggered when a slide is interacted with, such as linking to a custom URL, scrolling to the next slide, or scrolling to a specific page element.	– Enhances interactivity by adding dynamic actions to slides. – Offers flexibility in user navigation.	_actionType, _{target, linkBehavior}
Add Element	Allows the addition of various elements to the slide, including text, images, buttons, icons, and groups.	– Provides flexibility to customize the slide content. – Easily add interactive and visual elements to enhance the user experience.	_addElement

Post Content

Feature	Description	Props	Settings
Content	Image, Title, Excerpt, Link, Author, Date, Categories, Tags.	– Easily integrates live content into the design. – Supports dynamic updates without manual changes.	_{moveElement, hideElement}
Background	Sets the background color.	– Customizes the appearance of the group. – Enhances visual appeal.	_{backgroundColor}
Layout	Defines the layout structure of the slider, including element alignment and distribution.	– Provides flexibility to adjust the layout based on design needs. – Enhances user experience with a responsive design.	_{display, contentDirection, justification, verticalAlign, flexWrap, gap, useContentWidth, customWidth}
Spacing	Controls the padding and margin of the slider, with responsive settings for different screen sizes.	– Allows for better spacing adjustments across devices. – Customizable for optimal design consistency.	_padding
Border	Customizes the border of the slider, including color, width, and radius.	– Enhances the visual appeal and definition of the slider. – Fully customizable for different design styles.	_{borderStyle, borderWidth, borderColor, borderRadius}
Divider	Adds a decorative divider between slides with various shapes such as Waves, Curve, Curve Asymmetrical, Triangle, Triangle Asymmetrical, Tilt, Arrow, Split, and Book, each customizable for color, position, size, and width.	– Enhances the visual separation between slides. – Multiple styles to match design preferences.	_{dividerType, height, width, color, flip, invert, position}
Query	Allows fetching and displaying specific content based on criteria, such as posts, or categories.	– Enhances visual design with easy transformations. – Provides flexibility in element positioning.	_{latestPosts, includeCategories, specificPost, order, numberOfPosts}
Element	Allows customizing various elements like text, buttons, excerpt, link, images, author, date, categories and tags within the content.	– Provides flexibility to personalize content. – Improves control over individual element styles.	_element