What is it?

Slide to Navigate enables a smooth, interactive slide-to-unlock animation, ideal for directing users to a new page or section.

How to set it up?

To activate the Slide to Navigate feature, add the data-slide-to-navigate attribute to the desired element (preferably a div). Customize the appearance and behavior by setting the following optional attributes.

'data-slide-to-navigate'. Activates the Slide to Navigate animation on the element.

'data-preset' (Optional). Selects a preset style for the slider. Each preset applies a unique combination of colors, fonts, and effects.

Note: If using a preset, any additional attributes for data-slider-background, data-handle-color, and data-text-color may override specific preset values.

'data-height' (Optional). Sets the height of the slider. Type: Number (in pixels, e.g., 70). Default: 70.

'data-width' (Optional). Determines the base width of the slider. Type: Percentage or number (e.g., "100%" or "300px"). Default: "100%".

'data-mobile-width' (Optional). Specifies the width of the slider on mobile devices. Type: Percentage or number. Default: Adjusts automatically based on data-width.

'data-slider-background' (Optional). Sets a custom background color for the slider. Type: Color (e.g., "#ffffff" or "rgba(0,0,0,0.5)"). Default: Preset-defined or user-defined background.

'data-handle-color' (Optional). Specifies the color of the handle (slider button). Type: Color (e.g., "#000000"). Default: Preset-defined color.

'data-text-color' (Optional). Sets the color of the slider text. Type: Color. Default: Preset-defined color.

'data-font-size' (Optional). Defines the font size of the slider text. Type: Number (in pixels, e.g., 16). Default: Preset-defined size.

'data-font-family' (Optional). Sets the font family for the slider text. Type: Font name (e.g., "system-ui, sans-serif"). Default: "system-ui, sans-serif" (from preset).

'data-slider-text' (Optional). Sets the placeholder text within the slider. Type: String (e.g., "Slide to navigate"). Default: "Slide to navigate".

'data-redirect-url' (Optional). Specifies the URL to navigate to upon sliding.