Slider

Slider

Welcome to the “Slider” documentation. Looking to integrate slider into your website? Our widget provides you to create stunning and dynamic slideshows to enhance the visual appeal of your website. In this guide, we'll show you how to use the editor to customize your slider widget.

Step 1 : Open The Editor
Step 2 : Add And Customize Slides
Step 3 : Configure Settings
Step 4 : Choose Colors
Step 5 : Preview




Step 1: Open the Editor
1. Go to Slider template.
 2. Click on "Edit" after choosing your template.





Step 2: Add and customize slides

1. In this panel, you can easily add, remove, or rearrange your slides as needed.






2.  Begin customizing each slide by entering a slide name and editing the content.





3. Select the block's position and customize your preferred colors for the content.





4. You can add a background and image to each slide, adjusting its roundness, position, and inserting a link.





5. Additionally, you can include an overlay beneath the text, fine-tuning its roundness and adding a text link.
For buttons, you can adjust their size and roundness, enter a label, choose their position, and add an icon.





6. Finally, you can specify when to display or hide each slide.





Step 3: Configure settings

Here, you'll handle the settings:
1. You have the option to apply transitions between slides, enable full-screen mode, choose a height type, and make height adjustments.





2. You can also opt to display pagination and select its style. Additionally, you can make the pagination dots clickable and dynamic.





3. You can activate autoplay and specify the delay for each slide.





4. Finally, you can choose whether to show controls, enable loop mode, activate zoom functionality, and adjust margins as needed.






Step 4: Choose Colors

1. Within this panel, you can choose colors for both the background and controls.





Step 5: Preview

Lastly, you can click on “Preview” to see how your slider widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



Related Articles:
Image Gallery Logo Showcase