Logo
Logo

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).
      • Initial Slide – Set the first slide that is visible when the page loads.
      • One Per View At – Set a breakpoint for showing one slide at a time.
      • Slides Per Group – Set how many slides are in a group and move when a user moves to the next or previous slide.
      • Disable Keyboard Control – Toggle whether or not you want users to be able to use the Keyboard.
      • Play Animation On – Set when you would like the Animations API to retrigger any animations within a slide.
  • 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.