Appearance - Creative Slider

The Appearance tab is where you control the overall look and feel of your slider. These settings allow you to apply a visual skin, add custom CSS, and configure a global background that sits behind all of your slides.

Note: Some settings in this section are considered "Advanced" and are hidden by default to keep the interface clean for most users. You can reveal these options at any time by enabling the Show Advanced Settings toggle in the top-right corner of the editor. Throughout this documentation, these advanced parameters are marked with a flag icon .

The Appearance Tab

Slider Appearance

Skin: Select a predefined visual style for your slider's user interface elements, such as navigation arrows and bullets. The 'noskin' option provides a borderless and buttonless look for a minimalist design.
Initial fade duration: Set the duration (in milliseconds) of the initial fade-in animation when the slider first loads on the page. Enter '0' to disable this effect.
Slider Classes: Add one or more custom CSS class names to the main slider container. This is useful for applying custom styles from an external stylesheet.
Custom slider CSS: Enter custom CSS rules directly into this field to apply unique styles to this specific slider. This is a powerful way to make fine-tuned adjustments without affecting other parts of your site.

Slider Global Background

This background is visible behind the entire slider. It will only be seen if your individual slides have transparent or semi-transparent backgrounds.

Background color

Set a solid global background color for the slider using HEX or RGB(A) values.

Background image

Set a global background image for the slider. Note that this image will not scale down in responsive mode.

Background repeat

Control how the global background image repeats:

No-repeat: The image is shown only once.
Repeat: The image is tiled both horizontally and vertically.
Repeat-x: The image is tiled only horizontally.
Repeat-y: The image is tiled only vertically.

Background behavior

Choose the scrolling behavior of the background image:

Scroll: The background image will scroll along with the rest of the page.
Fixed: The background image remains in a fixed position in the viewport as the page is scrolled, creating a parallax-like effect.

Background position

Set the starting position of the background image using two values (e.g., '50% 50%' for center). The first value is the horizontal position, and the second is the vertical position.

Background size

Specify the size of the background image:

Auto: The image is displayed at its original size.
Cover: Scales the image to be as large as possible to completely cover the slider area, potentially cropping the image.
Contain: Scales the image to the largest possible size where both its width and height fit inside the slider area.
Custom Size (px or %): Set a custom width and height for the image using pixels or percentages.