Advanced Slider

Content Controls

Slides

This section allows users to add the individual slides that make up the slider.

• Add Slide – Use this to introduce a new slide to your slider.

Design Controls

Container

Adjust the main frame of your slider, including its dimensions.

• Width – Set the width of the slider container.
• Height – Choose from preset heights or define your own.
• Custom Height – Specify a unique height (Only available when the height is set to “custom”).

Slider

Customize the look and functionality of the slides and the transitions between them.

• Settings
  • Effect – Choose the transition effect between slides, such as fade or slide.
  • Coverflow – Define properties for the “coverflow” effect (Only available when effect is set to “coverflow”).
    • Shadow – Toggle shadow effects for a more 3D appearance.
    • Depth – Adjust the depth perception of the coverflow effect.
    • Rotate – Control the rotation angle in the coverflow effect.
    • Stretch – Manipulate the stretch property for a distinctive look.
  • Speed – Determine how fast slides transition.
  • Infinite – Choose whether slides loop indefinitely.
  • Center Slides – Keep slides centered (Only available when “Infinite” is enabled).
  • Autoplay – Set slides to transition automatically.
  • Autoplay Settings – Adjust autoplay behavior (Only available when “Autoplay” is enabled).
    • Speed – Define how fast slides transition during autoplay.
    • Stop On Interaction – Decide if autoplay stops upon user interaction.
    • Pause On Hover – Allow pausing of autoplay when a user hovers over the slide.
  • Advanced
    • Swipe On Scroll – Allow slide transitions through scroll gestures.
    • Auto Height – Let the slider adjust its height based on the current slide’s content.
    • Between Slides – Set the space between individual slides.
    • Slides Per View – Specify the number of slides displayed at once (Not available for “flip” and “fade” effects).
    • One Per View At – Set a breakpoint for showing one slide at a time.
• Arrows
  • Disable – Choose to disable navigation arrows.
  • Color – Select the color of the arrows (Only available when arrows are enabled).
  • Size – Adjust the size of the arrows (Only available when arrows are enabled).
  • Overlay – Overlay arrows on the slides (Only available when arrows are enabled).
  • Space To Slides – Set the distance between arrows and slides (Only available when arrows are enabled).
  • Space To Edge – Define the spacing between arrows and the edge of the slider (Only available when arrows are enabled).
  • Custom Icons – Use personalized icons for arrows (Only available when arrows are enabled).
    • Next – Set a custom icon for the next arrow.
    • Previous – Set a custom icon for the previous arrow.
• Pagination
  • Type – Choose the style of pagination, like bullets or progress bars.
  • Bullets – Define properties for bullet-style pagination (Only available if “Type” is set to “Bullets”).
    • Color – Set the color of the bullets.
    • Size – Adjust the size of bullets.
    • Space Between – Define the gap between each bullet.
    • Radius – Adjust the roundness of bullets.
  • Fraction – Define typographical settings for fraction-style pagination (Only available if “Type” is set to “Fraction”).
  • Progress Bar – Define properties for progress bar pagination (Only available if “Type” is set to “Progress Bar”).
    • Background – Choose the background color of the progress bar.
    • Progress – Set the color indicating progress.
    • Height – Adjust the height of the progress bar.
    • Position – Choose where the progress bar appears.
  • Overlay – Overlay pagination on the slides.
  • Margin – Set the space between pagination and other elements (Not available for “none” pagination).

Spacing

Define the space around your slider to ensure it fits perfectly within your webpage’s design.

• Margin Top – Set the space above the slider.
• Margin Bottom – Determine the space below the slider.