The Slider component is basically a slideshow element that you can use to showcase any kind of content such as paragraphs, images, videos, buttons, and more!
To integrate a Slider into your web page, follow these steps:
Customize your Slider using the Slider Options window accessible from the Slider’s Inline Editor. The available options are as follows:
You can drag and drop any element into a slide and design it freely just like any other section in Droip. Build with text, images, buttons, or any component to match your layout needs.
From the Slide Navigation window, you can customize a Slider’s Indicators and Navigation Arrows.
Indicators show how many slides are present and highlight the currently active one.
Navigation Arrows let users manually move between slides using left and right arrows displayed over the slider.
Style: Choose from seven different Indicator styles or select “None” to remove the Indicator.
Set Indicators Position: Access the Indicator Position window by clicking on “Set Indicators Position.”
Style: On the Arrows tab, you will find five different Navigation Arrow styles to choose from. You can also click on the None option to remove the arrows entirely.
If you do remove them, you can enable Swipe Gestures from Slider Settings > Slider Transitions so that users can swipe Slides using touch instead. You can also enable Autoplay in this case as well.
Hide at Each End: Enable this option to hide the left arrow on the first slide and the right arrow on the last slide. This helps indicate the first and last slide and prevents slide looping.
Customize Slide Animation from the Slide Transitions window. Open this panel by clicking on the transition icon.
By default, a Droip Slider shows one slide at a time. To display multiple slides side-by-side, like a carousel, follow the steps below.
From the Layers panel, select any Slider item inside your slider.
Then adjust the width to show multiple slides, to do that go to the Style Panel → Sizing. Change the Width from 100% to:
Or set your preferred width depending on how many items you want visible at once.
Once configured, your slider will now act like a carousel, showing multiple items side-by-side that can scroll or auto-slide depending on your interaction settings.
Was this page helpful?
Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.
Experience the power of Droip. Create stunning, responsive sites with pure creative freedom.
See Pricing