Development
Reference - Options
Jssor Slider Options
Option Required Default Value Description
$FillMode optional 0 The way to fill image in slide, 0: stretch, 1: contain (keep aspect ratio and put all inside slide), 2: cover (keep aspect ratio and cover whole slide), 4: actual size, 5: contain for large image and actual size for small image, default value is 0
$LazyLoading optional 1 For image with lazy loading format (<IMG src2="url" .../>), by default it will be loaded only when the slide comes.But an integer value (maybe 1, 2 or 3) indicates that how far of nearby slides should be loaded immediately as well, default value is 1.
$StartIndex optional 0 Index of slide to display when initialize, default value is 0
$AutoPlay optional 0 Auto play or not, to enable slideshow, this option must be set to greater than 0. Sefault value is 0.
0: no auto play
1: continuously
2: stop at last slide
4: stop on click
8: stop on user navigation (click on arrow/bullet/thumbnail, swipe slide, press keyboard left, right arrow key)
12: stop on click or user navigation
$AutoPlaySteps optional 1 Steps to go for each auto play request. Possible value can be 1, 2, -1, -2 ...
$Loop optional 1 Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
$Idle optional 3000 Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing
$AutoPlayInterval optional 3000 [Obsolete] Use $Idle instead.
$PauseOnHover optional 1 Whether to pause when mouse over if a slider is auto playing, 0: no pause, 1: pause for desktop, 2: pause for touch device, 3: pause for desktop and touch device, 4: freeze for desktop, 8: freeze for touch device, 12: freeze for desktop and touch device, default value is 1
$ArrowKeyNavigation optional 1 Steps to go for each navigation request by pressing arrow key, default value is 1.
$SlideDuration optional 500 Specifies default duration for right to left animation in milliseconds
$SlideEasing optional $Jease$.$OutQuad Specifies easing for right to left animation
$MinDragOffsetToSlide optional 20 Minimum drag offset to trigger slide
$SlideWidth optional Width of every slide in pixels, default value is width of 'slides' container
$SlideHeight optional Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing optional 0 Space between each slide in pixels
$Align optional (auto center) Offset position (in pixel) to align active slide in 'slides' container (slideshow will be disabled if this value is not 0).
$Cols optional (auto) [Obsolete] Number of slides to display is up to size of the Slides Container
$DisplayPieces optional 1 [Obsolete] Use $Cols instead.
$ParkingPosition optional 0 [Obsolete] Use $Align instead.
$UISearchMode optional 1 The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation optional 1 Orientation to play slide (for auto play, navigation), 1: horizental, 2: vertical
$DragOrientation optional 1 Orientation to drag slide, 0: no drag, 1: horizental, 2: vertical, 3: either (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
{$BulletNavigatorOptions} optional null Options to specify and enable navigator or not
{$ArrowNavigatorOptions} optional null Options to specify and enable arrow navigator or not
{$ThumbnailNavigatorOptions} optional null Options to specify and enable thumbnail navigator or not
{$SlideshowOptions} optional null Options to specify and enable slideshow or not
Ad
Option Required Default Value Description
$Class required $JssorBulletNavigator$ Class to create navigator instance
$ChanceToShow requried 2 0: Never, 1: Mouse Over, 2: Always
$ActionMode optional 1 0: None, 1: act by click, 2: act by mouse hover, 3: both, default value is 1
$Steps optional 1 Steps to go for each navigation request
$Rows optional 1 Rows to arrange bullets
$SpacingX optional 10 Horizontal space between each item in pixel
$SpacingY optional 10 Vertical space between each item in pixel
$Orientation optional 1 The orientation of the navigator, 1 horizontal, 2 vertical
$Scale optional true [Obsolete] use 'data-scale' attribute instead.
$AutoCenter optional 0 [Obsolete] use 'data-autocenter' attribute instead.
{$ArrowNavigatorOptions}
Option Required Default Value Description
$Class required $JssorArrowNavigator$ Class to create arrow navigator instance
$ChanceToShow requried 2 0: Never, 1: Mouse Over, 2: Always
$Steps optional 1 Steps to go for each navigation request
$Scale optional true [Obsolete] use 'data-scale' attribute instead.
$AutoCenter optional 0 [Obsolete] use 'data-autocenter' attribute instead.
{$ThumbnailNavigatorOptions}
Option Required Default Value Description
$Class required $JssorThumbnailNavigator$ Class to create thumbnail navigator instance
$ChanceToShow requried 2 0: Never, 1: Mouse Over, 2: Always
$Loop optional 1 Enable loop(circular) of carousel or not, 0: stop, 1: loop, default value is 1
$ActionMode optional 1 0: None, 1: act by click, 2: act by mouse hover, 3: both, default value is 1
$Cols optional (auto) [Obsolete] Number of items to display is up to the thumbnail navigator container size
$Rows optional 1 Specify rows to arrange thumbnails
$SpacingX optional 0 Horizontal space between each thumbnail in pixel
$SpacingY optional 0 Vertical space between each thumbnail in pixel
$Align optional (auto) The offset position to park active thumbnail
$Orientation optional 1 Orientation to arrange thumbnails, 1: horizental, 2: vertical
$NoDrag optional false Disable drag or not
$DisableDrag optional false [Obsolete] Use $NoDrag instead
$AutoCenter optional 0 [Obsolete] use 'data-autocenter' attribute instead.
{$SlideshowOptions}
Option Required Default Value Description
$Class required $JssorSlideshowRunner$ Class to create instance of slideshow
$Transitions requried An array of slideshow transitions to play slideshow
$TransitionsOrder optional 1 The way to choose transition to play slideshow, 1: Sequence, 0: Random
$ShowLink optional false Whether to bring slide link on top of the slider when slideshow is running, default value is false