Slider

Slider displays image slides with optional text and buttons.

Configure Slider

Each slide can include:

Image: Slide image. Use images with similar dimensions across slides to avoid awkward cropping.
Heading: Slide heading. Keep it short so it remains readable over imagery.
Heading tag: Sets the heading level. Use H1 only when the slider is the main page hero.
Text: Supporting rich text. Use a short sentence rather than a long paragraph.
Button label: Optional button text, such as Shop now , Learn more , or View project .
Button link: Optional destination for the button.
Content alignment: Aligns slide content left, center, or right. Choose an alignment that avoids busy parts of the image.
Overlay opacity: Adds a dark overlay to improve text readability. Increase it when text is hard to read; reduce it when the image becomes too dark.

Color scheme: Sets fallback colors and section context.
Accessibility label: Describes the slider for assistive technology. Example: Homepage image slider or Featured projects slider .
Full width: Makes the slider span the full section width. Use this for hero-style sliders.
Show arrows: Displays previous and next controls so customers can move through slides manually.
Show dots: Displays pagination dots so customers can see how many slides are available.
Autoplay: Automatically advances slides. Use carefully; manual controls are often better for content-heavy slides.
Autoplay speed: Time between slide changes when autoplay is enabled.
Transition effect: Controls the animation between slides. Slide is the safest general option; more dramatic effects work best for visual campaigns.
Transition speed: Controls how quickly the transition animation completes.
Desktop height: Controls slider height on desktop.
Mobile height: Controls slider height on mobile.

Spacing is controlled using the shared padding settings. See Section Spacing and Padding.