Jssor

Home Demos Tutorial Help Development Pricing Support Log in Sign up

Jssor Slider Dev Startup

API: Methods, Properties & Events
Slides HTML Code
- Jssor Slider
API: Options
$JssorSlider$ application programming interface, constructors,
methods, properties and events.
 Methods, Properties & Events
API:

 UI Definition
API:
Methods

 //constructor
Slider with Loading Screen
 $JssorSlider$(sliderElementOrId[, options])
Slider with Bullet Navigator //create slider instance with slider element id
 var jssor_slider_instance = new $JssorSlider$("
Slider
 with Arrow Navigator
//create slider instance with options
 with Thumbnail Navigator
Slider
var options = { $AutoPlay: 1 };
 with Slideshow
Slider
var jssor_slider_instance = new $JssorSlider$("


Slider with Fixed/Static Element //create slider instance with slider element
 var jssor_slider_element = document.getElementB
Pass HTML Validation var jssor_slider_instance = new $JssorSlider$(j

Tip
- Arrange Layout & Adjust Size
- Adjust Speed //methods
Tip
$Play()

Tip - Make Responsive Slider //start to play continuously, it equals to jsso
 jssor_slider_instance.$Play();
Tool - Slideshow Transition Viewer
 $Pause()
 //stop playing automatically, it equals to jsso
jssor_slider_instance.$Pause();

$PlayTo(slideIndex[, slideDuration])
//play slider to position 'slideIndex' within a
jssor_slider_instance.$PlayTo(3);

$GoTo(slideIndex)
//go to the specifed slide immediately with no
jssor_slider_instance.$GoTo(2);

$Next()
//play to the next slide
jssor_slider_instance.$Next();
$Prev()
//play to the previous slide
jssor_slider_instance.$Prev();

$ScaleWidth()
//get scaled width the slider currently display
var width = jssor_slider_instance.$ScaleWidth()

$ScaleWidth(width)
//scale the slider to new width and keep aspect
jssor_slider_instance.$ScaleWidth(width);

$ScaleHeight()
//get scaled height the slider currently displa
var height = jssor_slider_instance.$ScaleHeight

$ScaleHeight(height)
//scale the slider to new height and keep aspec
jssor_slider_instance.$ScaleHeight(height);

$ScaleSize(width, height)
//scale the slider to exact size
jssor_slider_instance.$ScaleHeight(width, heigh

$OriginalWidth()
//get original width of the slider
var width = jssor_slider_instance.$OriginalWidt

$OriginalHeight()
//get original height of the slider
var height = jssor_slider_instance.$OriginalHei

$SetSlideshowTransitions(transitions)
//reset slideshow transitions for the slider
jssor_slider_instance.$SetSlideshowTransitions(

$SetCaptionTransitions(transitions)
//reset caption transitions for the slider
jssor_slider_instance.$SetCaptionTransitions(tr

$SlidesCount()
//get slides count of the slider
var slidesCount = jssor_slider_instance.$Slides

$CurrentIndex()
//get current slide index of the slider
var slideIndex = jssor_slider_instance.$Current

$CurrentPosition()
 //get current position of the carousel
var currentPosition = jssor_slider_instance.$Cu

$IsAutoPlaying()
//obsolete, use $AutoPlay instead

$AutoPlay()
//get auto play status of the slider
var autoPlay = jssor_slider_instance.$AutoPlay(

$AutoPlay(value)
//set auto play, values can be 0: no auto play,
//4: stop on click, 8: stop on user navigation
jssor_slider_instance.$AutoPlay(1);
jssor_slider_instance.$AutoPlay(4 + 8);

$IsDragging()
//get drag status of the slider
var isDragging = jssor_slider_instance.$IsDragg

$IsSliding()
//get left <--> right sliding status of the sli
var isSliding = jssor_slider_instance.$IsSlidin

$IsMouseOver()
//get mouse over status of the slider
var isMouseOver = jssor_slider_instance.$IsMous

$LastDragSucceeded()
//get last drag succeeded status, returns 0 if
var isMouseOver = jssor_slider_instance.$IsMous

$AppendSlides(slidesHtml[, slideIndex])
//append slides dynamically

var slidesHtml = '<div><img data-u="image" src=

slidesHtml += '<div><img data-u="image" src="ur

//append slides after current slide

jssor_slider_instance.$AppendSlides(slidesHtml)

//append slides before current slide

var currentIndex = jssor_slider_instance.$Curre
jssor_slider_instance.$AppendSlides(slidesHtml,

//append slides before the first slide

jssor_slider_instance.$AppendSlides(slidesHtml,

//append slides after the last slide

 var slidesCount = jssor_slider_instance.$Slides
jssor_slider_instance.$AppendSlides(slidesHtml,

$RemoveSlides(slideIndices)
//remove an array of slides

//remove current slide

var currentIndex = jssor_slider_instance.$Curre
var slideIndices = [currentIndex];
jssor_slider_instance.$RemoveSlides(slideIndice

//remove the first and the third slide

var slideIndices = [0, 2];
jssor_slider_instance.$RemoveSlides(slideIndice

$ReloadSlides(slidesHtml)
//remove all slides and reload new slides
var slidesHtml = '<div><img data-u="image" src=
slidesHtml += '<div><img data-u="image" src="ur
jssor_slider_instance.$ReloadSlides(slidesHtml)

$Destroy()
//destroy jssor slider instance and remove all
jssor_slider_instance.$Destroy();

//release memory
jssor_slider_instance = null;

Ad

Properties
$Elmt
//get the html dom element of the slider
var sliderElement = jssor_slider_instance.$Elmt;
Events

$EVT_CLICK function(slideIndex[, event])

$EVT_DRAG_START function(position[, virtualPo
$EVT_DRAG_END function(position, startPosit
$EVT_SWIPE_START function(position[, virtualPo
$EVT_SWIPE_END function(position[, virtualPo
$EVT_LOAD_START function(slideIndex)
$EVT_LOAD_END function(slideIndex)
$EVT_FREEZE function()
$EVT_MOUSE_ENTER function()
$EVT_MOUSE_LEAVE function()
$EVT_POSITION_CHANGE function(position, fromPositi
$EVT_PARK function(slideIndex, fromInde
$EVT_PROGRESS_CHANGE function(slideIndex, progress
$EVT_STATE_CHANGE function(slideIndex, progress
$EVT_SLIDESHOW_START function(slideIndex[, progres
$EVT_SLIDESHOW_END function(slideIndex[, progres

$JssorSlider$.$EVT_CLICK
function SliderClickEventHandler(slideIndex, ev
{
//slideIndex: the index of slide which is c
//event: native event fired by browser
}
jssor_slider_instance.$On($JssorSlider$.$EVT_CL

$JssorSlider$.$EVT_DRAG_START
function SliderDragStartEventHandler(position,
{
//position: real position of the carousel
//virtualPosition: virtual position of the
//event: native event fired by browser
}
jssor_slider_instance.$On($JssorSlider$.$EVT_DR

$JssorSlider$.$EVT_DRAG_END
function SliderDragEndEvenetHandler(position, v
{
//position: real position of the carousel
//startPosition: real position that drag st
//virtualPosition: virtual position of the
//virtualStartPosition; virtual position th
//event: native event fired by browser
}
jssor_slider_instance.$On($JssorSlider$.$EVT_DR

$JssorSlider$.$EVT_SWIPE_START
function SliderSwipeStartEventHandler(position,
 {
//position: real position of the carousel
//virtualPosition: virtual position of the
}
jssor_slider_instance.$On($JssorSlider$.$EVT_SW

$JssorSlider$.$EVT_SWIPE_END
function SliderSwipeEndEventHandler(position, v
{
//position: real position of the carousel
//virtualPosition: virtual position of the
}
jssor_slider_instance.$On($JssorSlider$.$EVT_SW

$JssorSlider$.$EVT_LOAD_START
function SliderLoadStartEventHandler(slideIndex
{
//fires before image load
//slideIndex: the index of slide
}
jssor_slider_instance.$On($JssorSlider$.$EVT_LO

$JssorSlider$.$EVT_LOAD_END
function SliderLoadEndEventHandler(slideIndex)
{
//fires after image load
//slideIndex: the index of slide
}
jssor_slider_instance.$On($JssorSlider$.$EVT_LO

$JssorSlider$.$EVT_FREEZE
function SliderFreezeEventHandler()
{
//fires on slider freeze
}
jssor_slider_instance.$On($JssorSlider$.$EVT_LO

$JssorSlider$.$EVT_MOUSE_ENTER
function SliderMouseEnterEventHandler()
{
//fires on mouse enter
}
jssor_slider_instance.$On($JssorSlider$.$EVT_MO

$JssorSlider$.$EVT_MOUSE_LEAVE
function SliderMouseLeaveEventHandler()
{
//fires on mouse leave
}
 jssor_slider_instance.$On($JssorSlider$.$EVT_MO

$JssorSlider$.$EVT_POSITION_CHANGE
function SliderPositionChangeEventHandler(posit
{
//continuously fires while carousel sliding
//position: current position of the carouse
//fromPosition: previous position of the ca
//virtualPosition: current virtual position
//virtualFromPosition: previous virtual pos
}
jssor_slider_instance.$On($JssorSlider$.$EVT_PO

$JssorSlider$.$EVT_PARK
function SliderParkEventHandler(slideIndex, fro
{
//fires when carousel stopped sliding and s
//slideIndex: the index of current slide
//fromIndex: the index of previous slide
}
jssor_slider_instance.$On($JssorSlider$.$EVT_PA

$JssorSlider$.$EVT_STATE_CHANGE
function(slideIndex, progress, progressBegin, i
{
//given a slide parked, the life cycle of c
progressBegin --> idleBegin --> idleEnd -->
//this event fires at any state of
'progressBegin', 'idleBegin', 'idleEnd' and
//slideIndex: the index of slide
//progress: current time in the whole proce
//progressBegin: the begining of the whole
(generally, captions start to play in)
//idleBegin: captions played in and become
which is specified by option '$Idle'
//idleEnd: the waiting time is over, captio
//progressEnd: the whole process is complet

//tipical usage
if(progress == progressEnd)
{
//the animation of current slide is com
}
else if(progress == idleEnd)
{
//the idle period of current slide is o
}
else if(progress == idleBegin)
{
 //current slide become idle
}
else if(progress == progressBegin)
{
//the animation of current slide is at
}
else if(progress < 0)
{
//the animation of current slide is abo
//the progress value is negative only i
var realProgress = -progress - 1;
}
}
jssor_slider_instance.$On($JssorSlider$.$EVT_ST

$JssorSlider$.$EVT_PROGRESS_CHANGE
function SliderProgressChangeEventHandler(slide
{
//this event continuously fires within the
//tipical usage
var progressString = Math.round(progress /
}
jssor_slider_instance.$On($JssorSlider$.$EVT_PR

$JssorSlider$.$EVT_SLIDESHOW_START
function SliderSlideshowStartEventHandler(slide
{
//within the whole process of a slide, ther
//this event fires when slideshow begin
}
jssor_slider_instance.$On($JssorSlider$.$EVT_SL

$JssorSlider$.$EVT_SLIDESHOW_END
function SliderSlideshowEndtEventHandler(slideI
{
//within the whole process of a slide, ther
//this event fires when slideshow end
}
jssor_slider_instance.$On($JssorSlider$.$EVT_SL

 
Jssor Slider 2009-2021