Reference Options

Basic Usage (jQuery)
Basic Usage (No-jQuery)
Define Slides HTML Code
Slider with Loading Screen (jQuery)
Slider with Loading Screen (No-jQuery)
Slider with Bullet Navigator (jQuery)
Slider with Bullet Navigator (No-jQuery)
Slider with Arrow Navigator (jQuery)
Slider with Arrow Navigator (No-jQuery)
Slider with Thumbnail Navigator (jQuery)
Slider with Thumbnail Navigator (No-jQuery)
Slider with Caption (jQuery)
Slider with Caption (No-jQuery)
Slider with Slideshow (jQuery)
Slider with Slideshow (No-jQuery)
Slider with Fixed/Static Element (e.g. QR code)
Pass html Validation (against w3c standards)
Embed Jssor Slider into eBay Listing
Embed Jssor Slider into Blogger Post
Reference – Options
Reference – UI Definition
Reference – API
Tip – Arrange Layout & Adjust Size
Tip – Adjust Speed
Tip – Make Responsive Slider
Tip – Make Best Performance Slider
Tool – jssor.compress.exe
Tool – Caption Transition Viewer
Tool – Slideshow Transition Viewer

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	false	Whether to auto play, to enable slideshow, this option must be set to true.
$Loop	optional	1	Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
$HWA	optional	true	Enable hardware acceleration or not, default value is true
$AutoPlaySteps	optional	1	Steps to go for each navigation request (this options applys only when slideshow disabled).
$AutoPlayInterval	optional	3000	Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing
$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	false	Allows keyboard (arrow key) navigation or not
$SlideDuration	optional	500	Specifies default duration for right to left animation in milliseconds
$SlideEasing	optional	$JssorEasing$.$EaseOutQuad	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
$DisplayPieces	optional	1	Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1)
$ParkingPosition	optional	0	The offset position to park slide (this options applys only when slideshow disabled)
$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, 5: horizental reverse, 6: vertical reverse
$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 $DisplayPieces 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
{$CaptionSliderOptions}	optional	null	Options which specifies how to animate caption

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
$AutoCenter	optional	0	Auto center navigator in parent container, 0: None, 1: Horizontal, 2: Vertical, 3: Both
$Steps	optional	1	Steps to go for each navigation request
$Lanes	optional	1	Specify lanes to arrange items
$SpacingX	optional	0	Horizontal space between each item in pixel
$SpacingY	optional	0	Vertical space between each item in pixel
$Orientation	optional	1	The orientation of the navigator, 1 horizontal, 2 vertical
$Scale	optional	true	Scales bullet navigator or not while slider scale

Option	Required	Default Value	Description
$Class	required	$JssorArrowNavigator$	Class to create arrow navigator instance
$ChanceToShow	requried	2	0: Never, 1: Mouse Over, 2: Always
$AutoCenter	optional	0	Auto center arrows in parent container, 0: None, 1: Horizontal, 2: Vertical, 3: Both
$Steps	optional	1	Steps to go for each navigation request
$Scale	optional	true	Scales arrow navigator or not while slider scale

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, 2 rewind, default value is 1
$ActionMode	optional	1	0: None, 1: act by click, 2: act by mouse hover, 3: both, default value is 1
$AutoCenter	optional	3	Auto center thumbnail items in the thumbnail navigator container, 0: None, 1: Horizontal, 2: Vertical, 3: Both, default value is 3
$Lanes	optional	1	Specify lanes to arrange thumbnails
$SpacingX	optional	0	Horizontal space between each thumbnail in pixel
$SpacingY	optional	0	Vertical space between each thumbnail in pixel
$DisplayPieces	optional	1	Number of pieces to display
$ParkingPosition	optional	0	The offset position to park thumbnail
$Orientation	optional	1	Orientation to arrange thumbnails, 1: horizental, 2: vertical
$Scale	optional	true	Scales thumbnail navigator or not while slider scale
$DisableDrag	optional	false	Disable drag or not

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

Option	Required	Default Value	Description
$Class	required	$JssorCaptionSlider$	Class to create instance to animate caption
$CaptionTransitions	requried		An array of caption transitions to play caption
$PlayInMode	optional	1	How captions play in, 0: None (no play), 1: Chain (goes after main slide), 3: Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
$PlayOutMode	optional	1	How captions play out, 0: None (no play), 1: Chain (goes before main slide), 3: Chain Flatten (goes before main slide and flatten all caption animations), default value is 1

Demo - Slideshows