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]

Auto play or not, to enable slideshow, this option must be enabled.
[No]: Disable auto play
[Yes]: Auto play always
Stop at last slide: Auto play and stop at last slide
Stop on click: Auto play and stop when when user click on any slide
Stop on user navigation: Auto play and stop when user click arrow/bullet/thumbnail navigator, drag slide, arrow key
Stop on click or user navigation: Auto play and stop on either 'user click'> or '>user navigation'.

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 global setting of period (in milliseconds) to idle before playing next slide, default value is 3000.

Besides, you can set Idle for each individual slide.

If a Break Point has been set for an individual slide, the life cycle of the slide will be controlled by Break Point, the Idle setting will be ignored.

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 of 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 of carousel or not, default value is [Yes].

[Yes]: loop slides infinitely.
[No]: disable loop, it will stop at first slide and last slide.
Rewind: 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. Default value is 'Pause for Desktop'.
This option also affects Auto Play.

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.
Slideshow will not run for slider which displays multi Columns (e.g. Carousel Slider), or slide Align is not 0 (e.g. Nearby Imagge Partial Visible Slider).