Slider Maker

Options - Jssor Slider Maker


Options are to define behaviors to run a slider.

Options Window

Click 'Options' menu to open options window.


Auto Play: [Optional]

Whether to play automatically, to enable slideshow, this option must be set to true.

Steps (Auto Play): [Optional]

Steps to go for each 'auto play' navigation request, default value is 1.

This property works only when 'auto play' is enabled and slideshow is disabled.

Idle (Auto Play): [Optional]

The idle period (in milliseconds) to stay before going for next slide, default value is 3000.

This property works only when 'auto play' is enabled.

Duration (Play sliding left <-> right): [Optional]

The duration (in milliseconds) to complete sliding left <-> right effect through a slide, default value is 500.

Duration to complete sliding sliding left <-> right effect through multiple slides will be cauculated base on this property.

Ease (Play sliding left <-> right): [Optional]

The 'ease' to play sliding left <-> right animation on slide, default value is 'OutQuad'

'ease' means variation of speed to complete an animation. This property specifies 'ease' for sliding left <-> right animation.

Orientation (Drag): [Optional]

The orientation to drag slide, default value is 'horizontal'.

Min Offset (Drag): [Optional]

The minimum drag offset (in pixel) to trigger navigation request, default value is 20.

Start Index (Navigation): [Optional]

Index (zero based) of a slide which will display at the beginning, default value is 0, which means the first slide would be displayed at the beginning.

For example, to display the 4th slide at the beginning, this property value should be 3.

Loop (Navigation): [Optional]

Enable loop (circular) of carousel or not, default value is 'Loop'.

'Loop' means loop slides infinitely.
'Stop' means disable loop, it will stop at first slide and last slide.
'Rewind' means disable loop, it will rollback to first slide when it requests for next slide on last slide.

Keyboard Nav (Navigation): [Optional]

Steps to go for each navigation request by pressing arrow key, default value is 1.

If this property is enabled, it will trigger navigation requst when keyboar is pressed on 'left' or 'right' arrow key.

Pause on Hover (Navigation): [Optional]

Determines whether to pause or freeze sliding when mouse over.

ID (Output): [Optional]

The unique id of the slider which identifies the slider html element.
To place multiple sliders on one page, each slider should have different id.

If this property is specified as 'my_slider_01', the output id would be 'jssor_my_slider_01'.
The generated html code looks like <div id="jssor_my_slider_01" ...>

Center (Output): [Optional]

Determines whether to center (horizontal) the slider in its parent container, default value is false.

If this property is enabled, 'margin: 0 auto;' will be added to the slider element.
The generated html code looks like <div id="jssor_your_slider_id" style="margin: 0 auto; ..." ...>

Lazy Loading (Output): [Optional]

And integer value determines whether to perform lazy loading of images.
Eligible value can be 0, 1, 2 and so on. If the value is '2', it will load images of current slide and '2' adjacent slide.

If this property is not specified, it will not perform lazy loading.
If this property is specified, the generated image element looks like <img data-src2="image_url" ... />

Title (Output): [Optional]

The title which is brief description of the slider.

This property affects nothing on generated code of the slider.
When an user open the slider on, this property value would displayed as page title. It helps for user to understand or share the slider with others.

Play Transition (Slideshow): [Optional]

Determines whether to play slideshow and specifies the way to choose transition.

Note that slideshow plays only when 'Auto Play' is enabled.

Show Link (Slideshow): [Optional]

Determines whether to enable link while slideshow is running, default value is false.

Given a slide has main image, and 'link url' is specified for the image. If this property is enabled, the link is clickable while slideshow is running.