Slider Maker

Layout - Jssor Slider Maker


The layout is to define size, and arrange accessories like loading screen, bullet navigator, arrow navigator and thumbnail navigator of a slider.

Jssor Slider Layout Diagram

Outer Container is the main container which represents the whole slider, it contains Slides Container. And Slides Container contains all slides.

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

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

By default, Slides Container size is equal to slide size. It can be larger than slide size, thus there is chance to display multiple columns of slides in the Slides Container.

By default, Outer Container size is equal to Slides Container size. It can be larger than Slides Container size, thus there is chance to put navigators aside by the Slides Container.

Layout Window

Click 'Layout' menu to open layout window.

Layout Properties

Width, Height (Slide)

Slide width and height are key layout options, all other options are optional.

Columns (Slide)

Number of slides to fill in Slides Container.

Spacing (Slide)

Spacing (in pixel) between slides.

Align (Slide)

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.
Note that this option works only in case of slideshow disabled.

Orientation (Slide)

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

Fill Mode (Slide)

The way to fill main image in 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 at center of slide area.
'contain for large image and actual size for small image': use 'contain' for large image and 'actual size' for small image.

X, Y (Slides Container)

Positioning Slides Container in Outer Container.

Skin (Loading Screen)

Skin in html format which will display on top of slide while images of the slide are loading.

Responsive (Scaling)

Whether to scale the slider to fit target size.
By default, the final display size of the slider will be the size of Outer Container size. If this option is enabled, the final display size of the slider is up to the 'Responsive' options, and it will scale while window resizing.
Note jssor slider will always keep aspect ratio while scaling.

Assuming that responsive options are specified as below,
Scale To: Parent Container Width (width of parent container of the slider)
And Adjust: -20
Min: 300
Max: 1000
Then the slider will scale width to ('Parent Container Width' - 20), the width will be no less than 300 and no more than 1000.

Bullets, Arrows and Thumbnails

Switch to 'Bullets', 'Arrows' and 'Thumbnails' tabs, you can enable/disable bullet navigator, arrow navigator and thumbnail navigator.

See alsoBullet NavigatorArrow NavigatorThumbnail Navigator