Slider Composer

Layout Settings - Jssor Slider Composer Help


Layout

The layout is to define size, and arrange accessories like Loading UI, Bullet Navigator, Arrow Navigator and Thumbnail Navigator of a slider.


Jssor Slider Layout Diagram

Slider Container is the main container which represents the whole slider. Slides Container is inside Slider Container, all slides will be placed in Slides Container.

Optionally, you can insert Loading UI into Slider Container. The Loading UI will display while images of a slide are loading.

Optionally, you can insert Bullet Navigator, Arrow Navigator and Thumbnail Navigator into Slider Container.

By default, Slides Container inherits size from Slider Container.

By default, Slide inherits size from Slides Container.


Layout Settings Window

Click Layout menu to open options window.




Slider Container Properties



Id   [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 option is specified as 1, the output id would be jssor_1.
The generated html code looks like <div id="jssor_1" ...>


Width   [Required]

Width of the Slider Container.

Slider Container is the main container which respresents the whole slider. Slides Container, Bullet Navigator, Arrow Navigator, Thumbnail Navigator and Loading UI are all inside Slider Container.

By default, the final display size of the slider will be the size of Slider Container size. The final display size also depends on the Responsive Settings.


Height   [Required]

Height of the Slider Container.


RTL   [Optional]

RTL settings of some special languages like Aribic.

If this option is enabled, the text will align to right by default, and it arranges slides, bullet navigator items, thumbnail navigator items from right to left.
The generated html code looks like <div dir="rtl" ...>


Center   [Optional]

While insert the slider into a webpage, it determines whether to place the slider in center of its parent container, default value is false.

If this option 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; ..." ...>.


Bg Color   [Optional]

Background color of the Slider Container.


Bg Image   [Optional]

Background image of the Slider Container.




Slides Container Properties



Width   [Optional]

Width of the Slides Container. If this value is not specified, it will inherit Width from Slider Container.


Height   [Optional]

Height of the Slides Container. If this value is not specified, it will inherit Height from Slider Container.


X   [Optional]

X offset position of the Slides Container in Slider Container, default value is 0.


Y   [Optional]

Y offset position of the Slides Container in Slider Container, default value is 0.




Slide Properties



Width   [Optional]

Width of every slide. If this value is not specified, it will inherit Width from Slides Container.
To enable slideshow, should leave Width, Height and Align unset.


Height   [Optional]

Height of every slide. If this value is not specified, it will inherit Width from Slides Container.
To enable slideshow, should leave Width, Height and Align unset.


Fill   [Optional]

Global settings of the way to fill image of each slide, default value is Stretch.

Stretch: stretch main image to fill full area of slide.
Contain: scale main image and put it all inside at center of slide area.
Cover: scale main image and let it cover full area of slide.
Actual Size: keep original size of main image and put it in center of slide area.
Contain & Actual for Small Image: use Contain for large image and Actual Size for small image.


Orientation   [Optional]

Orientation to arrange slides, default value is Horizontal.
This option also indicates Orientation to play (if Auto Play is enabled).


Spacing   [Optional]

Spacing (in pixel) between slides, default value is 0.


Align   [Optional]

Offset position (in pixel) to align current slide in Slides Container, if this option is not specified, current slide will align to center of Slides Container.
To enable slideshow, should leave Width, Height and Align unset.


Start Slide   [Optional]

Index of a slide indicates which slide will display at the beginning, default value is 1, which means the first slide will display at the beginning.

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


Loop   [Optional]

Enable loop of carousel or not, default value is Yes.

Yes means loop carousel infinitely.
No 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.



Bullets, Arrows, Thumbnails, Loading UI and Responsive Settings

Switch to Bullets, Arrows, Thumbnails, Loading UI or Responsive Settings list items, you can set bullet navigator, arrow navigator and thumbnail navigator loading UI and responsive settings.

See alsoBullet NavigatorArrow NavigatorThumbnail NavigatorLoading UIResponsive Settings