Jssor Slider

May 13, 2014 in Slideshow 47046 views

Download

Overview
Documents

User Rating: 4.1/5 ( 20 votes)

Your Rating:

Touch Swipe by Finger/Mouse

Jssor Slider is touch swipe image slider with 390+ caption slide effects. When touch Jssor Slider, it will freeze and then move to the direction that finger swipes to. It comes with easy to use generation tool and full javascript source code.

Responsive

Jssor Slider is reponsive by calling API. The API method '$SetScaleWidth' is the best performance responsive slider approach, Jssor Slider can be scaled to any size at realtime.

Mobile Device Optimized

Jssor Slider works on any javascript enabled browser, including Windows Phone, iOS, Android and Opera Mobile etc.
And Jssor Slider is well tested on Samsung mobile, iPhone, iPad, HTC, Blackberry.

Both jQuery Slider Plugin, No-jQuery Version Available

Jssor jQuery slider plugin and No-jQuery version slider work almost the same, both are for image slider, content slider. Slideshow and caption slide animation are all available for both version.

jQuery developers benifit on jQuery js library. No-jQuery version is slider without jQuery. Non-jQuery developers benifite on light weight cut/paste code snipet, which is eligible for eBay listing, blogger post, or embed into any web page freely.

390+ Caption Effects/Transitions

Tons of options enable you build your own caption transition. You can start with fade, move, clip, wave, jump, rotate or zoom transitions, and so many more that you can imagine. And you can combine 2 or more transitions as well. See 390+ caption transitions.

360+ Slideshow Effects/Transitions

Jssor Slider comes with 360+ awesome slideshow effects, and the most scalable slideshow transition build tool enables you build infinite slideshow transitions. See360+ slideshow transitions.

30+ Professional Themes

It comes with 30+ professional demos (and growing).

Scalable Layout Engine

Scalable layout engine makes deep customization possible. It means that the interface is adaptive, user can add or remove navigator, arrow navigator and thumbnail navigator, or any decoration interface. User can populate skin freely.

Light Weight by Smart Compression

Jssor Slider is independent javascript slider, it depends no third party javascript library. The smart compression engine reserves code only necessary. All codes relate to unused features will be removed clearly. The size of final independent javascript code is minimum 15 KB.

Cut & Paste, Free Embedding

Jssor Slider comes with clean and anonymous wrapped javascript code snippet. No additional css file needed, no additional javascript file needed. There is no version conflict issue, there is no conflict with any other javascript library.

Cross Browser, All Browsers Supported

Jssor Slider is cross browser slider, all browsers are supported (IE 6+, Firefox 2+, Chrome 3+, Safari 3+, Opera 10+, iOS Safari, Opera Mobile, Android Browser, iPhone, iPad, Mac, Windows Surface etc.).

Development Kit + Open Source

Jssor Slider comes with full javascript source code with detailed api documentation, tons of simple examples, 30+ professional demos.

Free Upgrades, Free Future Versions

Free download, free upgrade. Always free with no charge.

eBay Friendly (eBay Store + eBay Listing)

Please just compress to code snippet and then cut and paste Jssor Slider into your ebay listing template, your ebay store home page.
What you can do with Jssor Slider? eBay Store Banner Rotator, eBay Store Promotion, Product Presentation, eBay Listing Image Gallery etc.
Note that please Do Not link to external script.

Blogger Friendly (Blogger Post)

Please just cut and paste Jssor Slider into your blogger post. Isn't the best blogger slider? Isn't it easy? Cheers!
Do you know that you can paste Jssor Slider into any web page?

Arrow Key Navigation

Keyboard arrow key navigation is enabled, press arrow left key to swipe left, press arrow right key to swipe right.

Source: jssor.com

1. INCLUDE JS FILES

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>

2. HTML

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
                        <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
</div>

3. JAVASCRIPT

jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});

4. 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, 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	true	Enable loop(circular) of carousel or not, default value is true
$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, 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
$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

{$BulletNavigatorOptions}

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

{$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

{$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	true	Enable loop(circular) of thumbnail carousel or not, default value is true
$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
$DisableDrag	optional	false	Disable drag or not

{$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 slide, 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

{$CaptionSliderOptions}

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

5. API

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
$SetScaleWidth(width)
//Scale the slider to new width and keep aspect ratio
$GetScaleWidth()
//Retrieve scaled width the slider currently displays
$GetScaleHeight()
//Retrieve scaled height the slider currently displays
$GetOriginalWidth()
//Retrieve original width of the slider
$GetOriginalHeight()
//Retrieve original height of the slider
$SetSlideshowTransitions(transitions)
//Reset slideshow transitions for the slider
$SetCaptionTransitions(transitions)
//Reset caption transitions for the slider
$SlidesCount()
//Retrieve slides count of the slider
$CurrentIndex()
//Retrieve current slide index of the slider
$IsAutoPlaying()
//Retrieve auto play status of the slider
$IsDragging()
//Retrieve drag status of the slider
$IsSliding()
//Retrieve right<-->left sliding status of the slider
$IsMouseOver()
//Retrieve mouse over status of the slider
$LastDragSucceded()
//Retrieve last drag succeded status, returns 0 if failed, returns drag offset if succeded

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_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_ROLLBACK_START   function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
//$EVT_ROLLBACK_END     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_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 '$AutoPlayInterval'
    //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_ROLLBACK_START
function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
{
    //when mousedown/touch while captions are playing out,
        the process will start to rollback, this event fires when rollback begin
}
//$JssorSlider$.$EVT_ROLLBACK_END
function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
{
    //when mousedown/touch while captions are playing out,
        the process will start to rollback, this event fires when rollback end
}
//$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
}

JS Tutorial

Jssor Slider

Jssor Slider

Jssor Slider

Jssor Slider

Jssor Slider

Related Articles