Panel Slider

How to use Panel Slider Widget of Sky Addons for Elementor

Sky Addons Panel Slider Widget is a versatile solution for showcasing images, content, and calls to action in an interactive slider format. It enables users to create stunning panels with customizable content visibility, transitions, and styling options. Perfect for portfolios, product galleries, team presentations, or any visual showcase that requires a modern, responsive slider layout.

Key Features

1. Responsive Design – Fully responsive with column control for different devices
2. Content Display Options – Show content on hover, active item, or always visible
3. Customizable Elements – Style titles, text, buttons, and overlays independently
4. Swiper Integration – Built on the powerful Swiper library for smooth animations
5. Navigation Controls – Multiple navigation options including arrows and pagination
6. Advanced Styling – Extensive styling options for all elements including overlays

Insert Panel Slider Widget

1. Open Elementor Editor. In the Elementor panel, search for “Panel Slider”
2. Drag and Drop the Widget to the desired location on your page / editor.

Sliders Section

Slider Items Repeater: Add or remove slider panels with title, text, image, and link options. Each slider panel is created through a repeater interface that includes the following customizable elements:

1. Columns – Define the number of columns for desktop, tablet, and mobile views.
2. Title – A textarea field where you can add the headline for each slide (supports up to 2 rows of text). This text appears prominently on your slide and can be styled independently.
3. Text/Description – A full WYSIWYG editor allowing rich text formatting, HTML elements, and even shortcodes. This provides complete flexibility for your slide content – from simple paragraphs to complex formatted text with multiple elements.
4. Image – Upload or select images from your media library to serve as the visual background for each slide. Images can be configured to cover the entire panel area or maintain their proportions.
5. Link – Set a URL destination for the panel, with options for external links, nofollow attributes, and control over which elements (title, entire item) are clickable.

1. Title HTML Tag – Select the HTML tag for your titles (h1-h6, div, span, etc.).
2. Image Size – Choose the size of your slider images.

Additional Section

1. Content Position – Control where content appears on panels (top, middle, bottom).
2. Text Alignment – Align text to left, center, right, or justify.
3. Show Elements – Toggle visibility of title, text, and button elements.
4. Show Content – Control when content appears (on hover, active item, always).
5. Image Cover – Make images cover the entire panel area.
6. Link Options – Configure which elements (title, item) are clickable.

Button/Link Section

1. Button Text – Customize the text for your call-to-action button.
2. Icon – Add an icon before or after the button text.
3. Icon Position – Choose whether the icon appears before or after text.
4. Icon Spacing – Control the space between the icon and text.

Carousel Settings Section

1. Height – Set a custom height for your slider.
2. Animation Speed – Control how fast slides transition.
3. Autoplay – Enable/disable automatic slide changing.
4. Loop – Allow the slider to loop continuously.
5. Free Mode – Enable draggable slides without fixed positions.
6. Effect – Choose between different transition effects.

Navigation Section

1. Navigation Type – Select from arrows, dots, or both for slider navigation.
2. Arrows Position – Place navigation arrows inside, outside, or at specific locations.
3. Navigation Size – Adjust the size of navigation elements.
4. Custom Icons – Replace default navigation icons with custom ones.

Pagination Section

1. Pagination Type – Choose between bullets, fraction, or progress bar.
2. Clickable – Make pagination bullets clickable to navigate to slides.
3. Dynamic Bullets – Enable dynamically changing bullet sizes.
4. Pagination Position – Control the placement of pagination indicators.

Style Customization

The Panel Slider offers extensive styling options for all elements, allowing you to create a cohesive design that matches your website’s aesthetic.

Slider Style Section

1. Background – Set the background color or gradient for slide panels.
2. Content Padding – Add spacing around content within panels.
3. Overlay Normal – Configure overlay appearance in normal state.
4. Overlay Hover – Change overlay styling when users hover over panels.
5. Overlay Active – Style overlays for the active/current panel.

Title Style Section

1. Bottom Spacing – Control space between title and subsequent elements.
2. Text Color – Set the color for titles.
3. Hover Text Color – Change title color on hover.
4. Typography – Customize font family, size, weight, and more.
5. Text Shadow – Add shadow effects to title text.
6. Text Stroke – Apply stroke styling to title text.

Text Style Section

1. Bottom Spacing – Set space between text and button.
2. Text Color – Choose color for descriptive text.
3. Typography – Control font appearance for text content.
4. Text Shadow – Add shadow effects for better visibility.

Button/Link Style Section

1. Padding – Control spacing within buttons.
2. Typography – Style button text appearance.
3. Border – Add and style borders around buttons.
4. Border Radius – Create rounded corners for buttons.
5. Colors & Backgrounds – Customize normal and hover states.
6. Shadows – Add box shadows for depth.
7. Hover Animation – Apply animations when users hover over buttons.

Navigation Style Section

1. Size & Spacing – Control dimensions of navigation elements.
2. Colors – Customize colors for normal, hover, and active states.
3. Background – Add backgrounds to navigation controls.
4. Border – Style borders around navigation elements.
5. Border Radius – Round corners of navigation controls.
6. Shadow – Add shadow effects to navigation.

Pagination Style Section

1. Size & Spacing – Set dimensions for pagination indicators.
2. Colors – Define colors for normal and active pagination states.
3. Border – Add borders to pagination elements.
4. Border Radius – Round corners of pagination indicators.

Save and Preview

1. Once you’ve customized and styled your accordion, 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 Working – Check if both Swiper CSS and JS files are properly loaded. Try enabling/disabling browser cache.
2. Images Not Displaying – Verify image URLs and ensure proper image sizes are selected in the widget settings.
3. Mobile Responsiveness Issues – Adjust column settings for different devices and check mobile preview in Elementor.
4. Navigation Controls Not Visible – Confirm navigation settings are enabled and properly positioned.
5. Content Visibility Problems – Check “Show Content” setting and ensure overlay styling isn’t hiding your content.

Conclusion

The Panel Slider Widget offers a powerful way to display content in an engaging, interactive format. With its extensive customization options, responsive design, and smooth transitions, you can create professional-looking sliders that enhance your website’s visual appeal and user experience. Whether showcasing projects, team members, or products, this widget provides the flexibility and functionality needed for impressive presentations.

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.