Flow Slider

How to use Flow Slider Widget of Sky Addons for Elementor

Sky Addons Flow Slider Widget is a dynamic slider solution that combines smooth transitions with a unique thumbnails navigation system. This advanced slider widget allows you to showcase your content with parallax effects, customizable slides, and an intuitive navigation interface. Perfect for portfolios, services, or any content that benefits from an elegant, flowing presentation style.

Key Features List

1. Parallax Effects – Create depth and visual interest with built-in parallax animations
2. Customizable Thumbnails – Add unique thumbnail titles that serve as navigation points
3. Responsive Design – Perfect display across all devices with customizable column settings
4. Rich Content Support – Each slide supports titles, descriptions, images, and custom links
5. Advanced Navigation – Use built-in or custom navigation icons with extensive styling options

Insert Flow Slider Widget

1. Open Elementor Editor. In the Elementor panel, search for “Flow Slider”
2. Drag and Drop the Widget to the desired location on your page / editor.
3. Begin customizing your slider with content, layout, and style options.

Sliders Section

This section allows you to create and manage your slider content:

1. Title – Create engaging headings for each slide that capture attention.
2. Thumb Title – Custom text displayed in the thumbnail navigation area.
3. Text – Add descriptive content to each slide with the WYSIWYG editor.
4. Image – Upload or select an image to display on the slide.
5. Link – Add optional URL links to make slides clickable to external content.

Slider Layout Section

Configure the overall appearance and behavior of your slider:

1. Height – Set the slider’s height using various units (px, em, %, vh).
2. Thumbnail Size – Select image dimensions for optimal display.
3. Title HTML Tag – Choose appropriate HTML tag for SEO and design.
4. Text Position – Position text content at top-left, top-center, or top-right.
5. Text Alignment – Align text left, center, right, or justified.
6. Content Max Width – Control the maximum width of content area.
7. Show Navigation – Toggle navigation arrows visibility.

Navigation Section

Customize the navigation controls for your slider:

1. Prev Icon – Select a custom icon for the previous slide button.
2. Next Icon – Select a custom icon for the next slide button.

Slider Settings Section

Configure the technical behavior of your slider:

1. Columns – Set number of visible thumbnails (1-6) for different devices.
2. Autoplay – Enable automatic slide progression.
3. Autoplay Speed – Control timing between automatic slide transitions.
4. Slide Speed – Adjust the animation speed between slides.
5. Pause On Hover – Stop autoplay when user hovers over the slider.

Style Customization

The Flow Slider offers extensive styling options allowing you to create a unique look that matches your website design perfectly.

Slider Style Section

1. Image Overlay – Add a color overlay to slide images for better text readability.
2. Padding/Margin – Control spacing around slider content.
3. Background – Apply custom backgrounds to the content area.
4. Title Styling – Customize typography, colors, spacing, and text effects.
5. Text Styling – Format description text with typography, colors, and spacing options.

Slider Thumbs Style Section

1. Line Style – Add and customize separating lines between thumbnails.
2. Typography – Control font, size, and weight of thumbnail titles.
3. Colors – Set normal, hover, and active state colors for thumbnails.
4. Background – Apply different backgrounds to thumbnails in various states.

Navigation Style Section

1. Size – Adjust the size of navigation arrows.
2. Spacing – Control distance between navigation buttons.
3. Padding – Add internal spacing within navigation buttons.
4. Border – Apply and style borders around navigation controls.
5. Border Radius – Create rounded corners for navigation buttons.
6. Colors/Backgrounds – Customize colors and backgrounds for normal and hover states.
7. Shadow Effects – Add text and box shadows to navigation elements.

Save and Preview

1. Once you’ve customized and styled your slider, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Slider Not Displaying Correctly – Try adjusting the container width, make sure your Section is set to full-width for optimal display.
2. Images Appear Distorted – Check your image dimensions or try selecting a different thumbnail size in the widget settings.
3. Navigation Not Working – Ensure JavaScript is enabled in your browser and check for any JavaScript errors in the console.
4. Mobile Display Issues – Review responsive settings and adjust columns for smaller screens if thumbnails appear too small.

Conclusion

The Flow Slider widget offers a sophisticated way to showcase content with its unique flowing navigation and parallax effects. It’s perfect for creating engaging user experiences for portfolios, services, or product showcases. The extensive customization options ensure your slider will blend seamlessly with your website design while providing an interactive experience for visitors.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at http://wowdevslive.bdkoder/support/ where our expert team is ready to provide prompt and helpful assistance.