Slider Composer

Add Layer - Jssor Slider Composer Help

Open /jssorservice/001-image-slider.slider/=edit.

1. Add layer

In layers pane, click Add Layer toolbox item and choose layer type on the dropdown menu.

2. Set layer static properties

Select the layer and set static properties of the layer.
Text Layer (A layer contains plain text or customized html code)



Image Layer (A layer represents an image)



Panel Layer (A panel layer is a container which contains child layers)



Layer Properties

Width: [Required]

Height: [Required]

Border: [Optional]

Background Color: [Optional]

Background Image: [Optional]

Link: [Optional]

Blend: [Optional]

Describes how a layer should blend with the layer's direct parent and the layer's background and layers below the layer. Default value is 'normal'.


Font (Text Layer): [Optional]

Font Weight (Text Layer): [Optional]

Font Size (Text Layer): [Optional]

Text Color (Text Layer): [Optional]

Italic (Text Layer): [Optional]

Text Align (Text Layer): [Optional]

Text Shadow (Text Layer): [Optional]

Line Height (Text Layer): [Optional]

Letter Spacing (Text Layer): [Optional]

Padding (Text Layer): [Optional]

Image (Image Layer): [Optional]

Extended Properties

Extended properties are advanced properties for user to customize display or behavior of a layer.


Transform Origin: [Optional]

Specifies the center point (x y z) to transform (rotate, scale, skew) a layer, default value is '50% 50% 0'.


Backface: [Optional]

Backface visibility of a layer, default value is visible.


Depth (3D Space Perspective): [Optional]

For panel layer only

3D Space is not necessary, setting up a perspective Depth value will create 3D space of the panel layer.
3D space is for child layers to play 3D transition like Rotate X or Rotate Y or Translate Z.
See Layer Animation 3d

Depth of the 3D space perspective, to create 3D space of a panel layer, this property should be specified.
For example, the value 50% means the depth is 50% of 3D space size. Given a 3D space with size 400px x 400px, the perspective depth will be (400 + 400) / 2 * 0.5 = 200px.


X (3D Perspective Origin): [Optional] panel layer only

The X (in percentage) of the perspective point, default value is 50%.
Note that perspective point is known as perspective-origin-x in css3.


Y (3D Perspective Origin): [Optional] panel layer only

The Y (in percentage) of the perspective point, default value is 50%.
Note that perspective point is known as perspective-origin-y in css3.


Pointer Events: [Optional] panel layer only

Indicates a layer can become the target of mouse events. The value is 'all' by default which is interited from parent layer.
The value 'none' instructs the mouse event to go "through" the layer and target whatever is "underneath" that layer instead.


Overflow X: [Optional]

This property specifies whether to clip content, render a scroll bar, or display overflow content of a layer, when it overflows at the left and right edges. Default value is visible.


Overflow Y: [Optional]

This property specifies whether to clip content, render a scroll bar, or display overflow content of a layer, when it overflows at the top and bottom edges. Default value is visible.


Class Name: [Optional]

Custom class name of a layer, which is for developer to set class name (css) of a layer.


ID: [Optional]

Custom id of a layer, which is for developer to set id attribute of a layer.


3. Set initial motion properties

Motion properties of a layer are dynamic properties.
By default, a layer has a motion point at the begining of timeline. There may be multiple motion points in the timeline. That's to say, motion property value can change from time to time, it leads layer animate in the timeline.


Select the begining motion point of a layer to set initial motion properties of the layer.