Development
Reference - API
$JssorSlider$ application programming interface, constructors, methods, properties and events.
Methods
//Constructor   e.g. var slider1 = new $JssorSlider$("slider1_container");
$JssorSlider$(container)                //Constructor
$JssorSlider$(container, options)       //Constructor
//Member Methods   e.g. slider1.$Play();
$Play()
//Start auto play if the slider is currently paused
$Pause()
//Pause the slider, prevent it from auto playing
$PlayTo(slideIndex[, slideDuration])
//Play slider to position 'slideIndex' within a period calculated base on 'slideDuration'
$GoTo(slideIndex)
//Go to the specifed slide immediately with no play
$Next()
//Play the slider to next slide
$Prev()                            
//Play the slider to previous slide                            
$ScaleSize(width, height)                            
//Scale the slider to exact size in cover mode                            
$ScaleWidth()
//Get scaled width the slider currently displays
$ScaleWidth(width)
//Scale the slider to new width and keep aspect ratio
$ScaleHeight()
//Get scaled height the slider currently displays                            
$ScaleHeight(height)
//Scale the slider to new height and keep aspect ratio
$OriginalWidth()
//Get original width of the slider
$OriginalHeight()
//Get original height of the slider
$SetSlideshowTransitions(transitions)
//Reset slideshow transitions for the slider
$SetCaptionTransitions(transitions)
//Reset caption transitions for the slider
$SlidesCount()
//Get slides count of the slider
$CurrentIndex()
//Get current slide index of the slider
$IsAutoPlaying()
//Obsolete, use $AutoPlay instead                            
$AutoPlay()
//Get auto play status of the slider                              
$AutoPlay(value)
//Set auto play, values can be 0: no auto play, 1, continuously, 2: stop at last slide,
//4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)                            
$IsDragging()
//Get drag status of the slider
$IsSliding()
//Get left <--> right sliding status of the slider
$IsMouseOver()
//Get mouse over status of the slider
$LastDragSucceeded()
//Get last drag succeded status, returns 0 if failed, returns drag offset if succeded
Ad
Properties
//e.g. var htmlElement = slider1.$Elmt;
$Elmt
//the html dom element of the slider
                            
Events
//e.g. jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){});
//$EVT_CLICK            function(slideIndex[, event])
//$EVT_DRAG_START       function(position[, virtualPosition, event])
//$EVT_DRAG_END         function(position, startPosition[, virtualPosition, virtualStartPosition, event])
//$EVT_SWIPE_START      function(position[, virtualPosition])
//$EVT_SWIPE_END        function(position[, virtualPosition])
//$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, fromPosition[, virtualPosition, virtualFromPosition])
//$EVT_PARK             function(slideIndex, fromIndex)
//$EVT_PROGRESS_CHANGE  function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_STATE_CHANGE     function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_SLIDESHOW_START  function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
//$EVT_SLIDESHOW_END    function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])

//$JssorSlider$.$EVT_CLICK
function(slideIndex[, event])
{
    //slideIndex: the index of slide which is clicked
    //event: native event fired by browser
}

//$JssorSlider$.$EVT_DRAG_START
function(position[, virtualPosition, event])
{
    //position: real position of the carousel
    //virtualPosition: virtual position of the carousel
    //event: native event fired by browser
}

//$JssorSlider$.$EVT_DRAG_END
function(position[, virtualPosition, startPosition, virtualStartPosition, event])
{
    //position: real position of the carousel
    //startPosition: real position that drag starts at
    //virtualPosition: virtual position of the carousel
    //virtualStartPosition; virtual position that drag starts at
    //event: native event fired by browser
}

//$JssorSlider$.$EVT_SWIPE_START
function(position[, virtualPosition])
{
    //position: real position of the carousel
    //virtualPosition: virtual position of the carousel
}

//$JssorSlider$.$EVT_SWIPE_END
function(position[, virtualPosition])
{
    //position: real position of the carousel
    //virtualPosition: virtual position of the carousel
}

//$JssorSlider$.$EVT_LOAD_START
function(slideIndex)
{
    //fires before image load
    //slideIndex: the index of slide
}

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

//$JssorSlider$.$EVT_FREEZE
function()
{
    //fires on slider freeze
}

//$JssorSlider$.$EVT_MOUSE_ENTER
function()
{
    //fires on mouse enter
}

//$JssorSlider$.$EVT_MOUSE_LEAVE
function()
{
    //fires on mouse leave
}

//$JssorSlider$.$EVT_POSITION_CHANGE
function(position, fromPosition[, virtualPosition, virtualFromPosition])
{
    //continuously fires while carousel sliding
    //position: current position of the carousel
    //fromPosition: previous position of the carousel
    //virtualPosition: current virtual position of the carousel
    //virtualFromPosition: previous virtual position of the carousel
}

//$JssorSlider$.$EVT_PARK
function(slideIndex, fromIndex)
{
    //fires when carousel stopped sliding and slides park in correct position
    //slideIndex: the index of current slide
    //fromIndex: the index of previous slide
}

//$JssorSlider$.$EVT_STATE_CHANGE
function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
{
    //given a slide parked, the life cycle of current slide is as below,
    progressBegin --> idleBegin --> idleEnd --> progressEnd
    //this event fires at any state of
    'progressBegin', 'idleBegin', 'idleEnd' and 'progressEnd'
    //slideIndex: the index of slide
    //progress: current time in the whole process
    //progressBegin: the begining of the whole process
        (generally, captions start to play in)
    //idleBegin: captions played in and become idle, will wait for a period
        which is specified by option '$Idle'
    //idleEnd: the waiting time is over, captions start to play out
    //progressEnd: the whole process is complete
        
    //tipical usage
    if(progress == progressEnd)
    {
        //the animation of current slide is complete
    }
    else if(progress == idleEnd)
    {
        //the idle period of current slide is over
    }
    else if(progress == idleBegin)
    {
        //current slide become idle
    }
    else if(progress == progressBegin)
    {
        //the animation of current slide is at the beginning
    }
    else
    {
        //the animation of current slide is aborted,
            the progress value is negative only in this case
        var realProgress = -progress - 1;
    }
}

//$JssorSlider$.$EVT_PROGRESS_CHANGE
function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
{
    //this event continuously fires within the process of current slide
    //tipical usage
    var progressString = progress / progressEnd * 100 + "%";
}

//$JssorSlider$.$EVT_SLIDESHOW_START
function(slideIndex, progress[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
{
    //within the whole process of a slide, there maybe slideshow to run
    //this event fires when slideshow begin
}

//$JssorSlider$.$EVT_SLIDESHOW_END
function(slideIndex, progress[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
{
    //within the whole process of a slide, there maybe slideshow to run
    //this event fires when slideshow end
}