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 Slideshow (jQuery) Slider with Slideshow (No-jQuery) Slider with Fixed/Static Element (e.g. QR code) Pass html Validation (against w3c standards) Reference - Options Reference - UI Definition Reference - API Tip - Arrange Layout & Adjust Size Tip - Make Responsive Slider Tip - Make Best Performance Slider Tool - Slideshow Transition Viewer
Tables below describe options to initialize Jssor Slider. See also Options - Jssor Slider Maker.
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 false Whether to play automatically, to enable slideshow, this option must be set to true.
$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
$Cols optional 1 Number of slides to display in the 'slides' container (slideshow would be disabled if the value is greater than 1)
$DisplayPieces optional 1 [Obsolete] Use $Cols instead.
$Align optional 0 Offset position (in pixel) to align current slide in 'slides' container (this options works only in case of slideshow disabled).
$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
$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
$Rows optional 1 Rows to arrange bullets
$Rows optional 1 [Obsolete] Use Rows instead
$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 Scales bullet navigator or not while slider scale
{$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
$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
{$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, 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
$Cols optional 1 Number of items to display in the thumbnail navigator container
$DisplayPieces optional 1 [Obsolete] Use $Cols instead
Rows optional 1 Specify lanes to arrange thumbnails
$Rows optional 1 [Obsolete] Use $Rows instead
$SpacingX optional 0 Horizontal space between each thumbnail in pixel
$SpacingY optional 0 Vertical space between each thumbnail in pixel
$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
$NoDrag optional false Disable drag or not
$NoDrag optional false [Obsolete] Use $NoDrag 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

See also Options - Jssor Slider Maker