jquery_image_gallery 0.1.0 → 0.2.0

data/app/assets/javascripts/jquery_image_gallery_slider.js

@@ -0,0 +1,4198 @@
+/*
+ * Jssor.Slider 19.0
+ * http://www.jssor.com/
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ * 
+ * TERMS OF USE - Jssor.Slider
+ * 
+ * Copyright 2014 Jssor
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+
+var $JssorSlideshowFormations$ = window.$JssorSlideshowFormations$ = new function () {
+  var _This = this;
+
+  //Constants +++++++
+
+  var COLUMN_INCREASE = 0;
+  var COLUMN_DECREASE = 1;
+  var ROW_INCREASE = 2;
+  var ROW_DECREASE = 3;
+
+  var DIRECTION_HORIZONTAL = 0x0003;
+  var DIRECTION_VERTICAL = 0x000C;
+
+  var TO_LEFT = 0x0001;
+  var TO_RIGHT = 0x0002;
+  var TO_TOP = 0x0004;
+  var TO_BOTTOM = 0x0008;
+
+  var FROM_LEFT = 0x0100;
+  var FROM_TOP = 0x0200;
+  var FROM_RIGHT = 0x0400;
+  var FROM_BOTTOM = 0x0800;
+
+  var ASSEMBLY_BOTTOM_LEFT = FROM_BOTTOM + TO_LEFT;
+  var ASSEMBLY_BOTTOM_RIGHT = FROM_BOTTOM + TO_RIGHT;
+  var ASSEMBLY_TOP_LEFT = FROM_TOP + TO_LEFT;
+  var ASSEMBLY_TOP_RIGHT = FROM_TOP + TO_RIGHT;
+  var ASSEMBLY_LEFT_TOP = FROM_LEFT + TO_TOP;
+  var ASSEMBLY_LEFT_BOTTOM = FROM_LEFT + TO_BOTTOM;
+  var ASSEMBLY_RIGHT_TOP = FROM_RIGHT + TO_TOP;
+  var ASSEMBLY_RIGHT_BOTTOM = FROM_RIGHT + TO_BOTTOM;
+
+  //Constants -------
+
+  //Formation Definition +++++++
+  function isToLeft(roadValue) {
+    return (roadValue & TO_LEFT) == TO_LEFT;
+  }
+
+  function isToRight(roadValue) {
+    return (roadValue & TO_RIGHT) == TO_RIGHT;
+  }
+
+  function isToTop(roadValue) {
+    return (roadValue & TO_TOP) == TO_TOP;
+  }
+
+  function isToBottom(roadValue) {
+    return (roadValue & TO_BOTTOM) == TO_BOTTOM;
+  }
+
+  function PushFormationOrder(arr, order, formationItem) {
+    formationItem.push(order);
+    arr[order] = arr[order] || [];
+    arr[order].push(formationItem);
+  }
+
+  _This.$FormationStraight = function (transition) {
+    var cols = transition.$Cols;
+    var rows = transition.$Rows;
+    var formationDirection = transition.$Assembly;
+    var count = transition.$Count;
+    var a = [];
+    var i = 0;
+    var col = 0;
+    var r = 0;
+    var cl = cols - 1;
+    var rl = rows - 1;
+    var il = count - 1;
+    var cr;
+    var order;
+    for (r = 0; r < rows; r++) {
+      for (col = 0; col < cols; col++) {
+        cr = r + ',' + col;
+        switch (formationDirection) {
+          case ASSEMBLY_BOTTOM_LEFT:
+            order = il - (col * rows + (rl - r));
+            break;
+          case ASSEMBLY_RIGHT_TOP:
+            order = il - (r * cols + (cl - col));
+            break;
+          case ASSEMBLY_TOP_LEFT:
+            order = il - (col * rows + r);
+          case ASSEMBLY_LEFT_TOP:
+            order = il - (r * cols + col);
+            break;
+          case ASSEMBLY_BOTTOM_RIGHT:
+            order = col * rows + r;
+            break;
+          case ASSEMBLY_LEFT_BOTTOM:
+            order = r * cols + (cl - col);
+            break;
+          case ASSEMBLY_TOP_RIGHT:
+            order = col * rows + (rl - r);
+            break;
+          default:
+            order = r * cols + col;
+            break; //ASSEMBLY_RIGHT_BOTTOM
+        }
+        PushFormationOrder(a, order, [r, col]);
+      }
+    }
+
+    return a;
+  };
+
+  _This.$FormationSwirl = function (transition) {
+    var cols = transition.$Cols;
+    var rows = transition.$Rows;
+    var formationDirection = transition.$Assembly;
+    var count = transition.$Count;
+    var a = [];
+    var hit = [];
+    var i = 0;
+    var col = 0;
+    var r = 0;
+    var cl = cols - 1;
+    var rl = rows - 1;
+    var il = count - 1;
+    var cr;
+    var courses;
+    var course = 0;
+    switch (formationDirection) {
+      case ASSEMBLY_BOTTOM_LEFT:
+        col = cl;
+        r = 0;
+        courses = [ROW_INCREASE, COLUMN_DECREASE, ROW_DECREASE, COLUMN_INCREASE];
+        break;
+      case ASSEMBLY_RIGHT_TOP:
+        col = 0;
+        r = rl;
+        courses = [COLUMN_INCREASE, ROW_DECREASE, COLUMN_DECREASE, ROW_INCREASE];
+        break;
+      case ASSEMBLY_TOP_LEFT:
+        col = cl;
+        r = rl;
+        courses = [ROW_DECREASE, COLUMN_DECREASE, ROW_INCREASE, COLUMN_INCREASE];
+        break;
+      case ASSEMBLY_LEFT_TOP:
+        col = cl;
+        r = rl;
+        courses = [COLUMN_DECREASE, ROW_DECREASE, COLUMN_INCREASE, ROW_INCREASE];
+        break;
+      case ASSEMBLY_BOTTOM_RIGHT:
+        col = 0;
+        r = 0;
+        courses = [ROW_INCREASE, COLUMN_INCREASE, ROW_DECREASE, COLUMN_DECREASE];
+        break;
+      case ASSEMBLY_LEFT_BOTTOM:
+        col = cl;
+        r = 0;
+        courses = [COLUMN_DECREASE, ROW_INCREASE, COLUMN_INCREASE, ROW_DECREASE];
+        break;
+      case ASSEMBLY_TOP_RIGHT:
+        col = 0;
+        r = rl;
+        courses = [ROW_DECREASE, COLUMN_INCREASE, ROW_INCREASE, COLUMN_DECREASE];
+        break;
+      default:
+        col = 0;
+        r = 0;
+        courses = [COLUMN_INCREASE, ROW_INCREASE, COLUMN_DECREASE, ROW_DECREASE];
+        break; //ASSEMBLY_RIGHT_BOTTOM
+    }
+    i = 0;
+    while (i < count) {
+      cr = r + ',' + col;
+      if (col >= 0 && col < cols && r >= 0 && r < rows && !hit[cr]) {
+        //a[cr] = i++;
+        hit[cr] = true;
+        PushFormationOrder(a, i++, [r, col]);
+      }
+      else {
+        switch (courses[course++ % courses.length]) {
+          case COLUMN_INCREASE:
+            col--;
+            break;
+          case ROW_INCREASE:
+            r--;
+            break;
+          case COLUMN_DECREASE:
+            col++;
+            break;
+          case ROW_DECREASE:
+            r++;
+            break;
+        }
+      }
+
+      switch (courses[course % courses.length]) {
+        case COLUMN_INCREASE:
+          col++;
+          break;
+        case ROW_INCREASE:
+          r++;
+          break;
+        case COLUMN_DECREASE:
+          col--;
+          break;
+        case ROW_DECREASE:
+          r--;
+          break;
+      }
+    }
+    return a;
+  };
+
+  _This.$FormationZigZag = function (transition) {
+    var cols = transition.$Cols;
+    var rows = transition.$Rows;
+    var formationDirection = transition.$Assembly;
+    var count = transition.$Count;
+    var a = [];
+    var i = 0;
+    var col = 0;
+    var r = 0;
+    var cl = cols - 1;
+    var rl = rows - 1;
+    var il = count - 1;
+    var cr;
+    var courses;
+    var course = 0;
+    switch (formationDirection) {
+      case ASSEMBLY_BOTTOM_LEFT:
+        col = cl;
+        r = 0;
+        courses = [ROW_INCREASE, COLUMN_DECREASE, ROW_DECREASE, COLUMN_DECREASE];
+        break;
+      case ASSEMBLY_RIGHT_TOP:
+        col = 0;
+        r = rl;
+        courses = [COLUMN_INCREASE, ROW_DECREASE, COLUMN_DECREASE, ROW_DECREASE];
+        break;
+      case ASSEMBLY_TOP_LEFT:
+        col = cl;
+        r = rl;
+        courses = [ROW_DECREASE, COLUMN_DECREASE, ROW_INCREASE, COLUMN_DECREASE];
+        break;
+      case ASSEMBLY_LEFT_TOP:
+        col = cl;
+        r = rl;
+        courses = [COLUMN_DECREASE, ROW_DECREASE, COLUMN_INCREASE, ROW_DECREASE];
+        break;
+      case ASSEMBLY_BOTTOM_RIGHT:
+        col = 0;
+        r = 0;
+        courses = [ROW_INCREASE, COLUMN_INCREASE, ROW_DECREASE, COLUMN_INCREASE];
+        break;
+      case ASSEMBLY_LEFT_BOTTOM:
+        col = cl;
+        r = 0;
+        courses = [COLUMN_DECREASE, ROW_INCREASE, COLUMN_INCREASE, ROW_INCREASE];
+        break;
+      case ASSEMBLY_TOP_RIGHT:
+        col = 0;
+        r = rl;
+        courses = [ROW_DECREASE, COLUMN_INCREASE, ROW_INCREASE, COLUMN_INCREASE];
+        break;
+      default:
+        col = 0;
+        r = 0;
+        courses = [COLUMN_INCREASE, ROW_INCREASE, COLUMN_DECREASE, ROW_INCREASE];
+        break; //ASSEMBLY_RIGHT_BOTTOM
+    }
+    i = 0;
+    while (i < count) {
+      cr = r + ',' + col;
+      if (col >= 0 && col < cols && r >= 0 && r < rows && typeof (a[cr]) == 'undefined') {
+        PushFormationOrder(a, i++, [r, col]);
+        //a[cr] = i++;
+        switch (courses[course % courses.length]) {
+          case COLUMN_INCREASE:
+            col++;
+            break;
+          case ROW_INCREASE:
+            r++;
+            break;
+          case COLUMN_DECREASE:
+            col--;
+            break;
+          case ROW_DECREASE:
+            r--;
+            break;
+        }
+      }
+      else {
+        switch (courses[course++ % courses.length]) {
+          case COLUMN_INCREASE:
+            col--;
+            break;
+          case ROW_INCREASE:
+            r--;
+            break;
+          case COLUMN_DECREASE:
+            col++;
+            break;
+          case ROW_DECREASE:
+            r++;
+            break;
+        }
+        switch (courses[course++ % courses.length]) {
+          case COLUMN_INCREASE:
+            col++;
+            break;
+          case ROW_INCREASE:
+            r++;
+            break;
+          case COLUMN_DECREASE:
+            col--;
+            break;
+          case ROW_DECREASE:
+            r--;
+            break;
+        }
+      }
+    }
+    return a;
+  };
+
+  _This.$FormationStraightStairs = function (transition) {
+    var cols = transition.$Cols;
+    var rows = transition.$Rows;
+    var formationDirection = transition.$Assembly;
+    var count = transition.$Count;
+    var a = [];
+    var i = 0;
+    var col = 0;
+    var r = 0;
+    var cl = cols - 1;
+    var rl = rows - 1;
+    var il = count - 1;
+    var cr;
+    switch (formationDirection) {
+      case ASSEMBLY_BOTTOM_LEFT:
+      case ASSEMBLY_TOP_RIGHT:
+      case ASSEMBLY_TOP_LEFT:
+      case ASSEMBLY_BOTTOM_RIGHT:
+        var C = 0;
+        var R = 0;
+        break;
+      case ASSEMBLY_LEFT_BOTTOM:
+      case ASSEMBLY_RIGHT_TOP:
+      case ASSEMBLY_LEFT_TOP:
+      case ASSEMBLY_RIGHT_BOTTOM:
+        var C = cl;
+        var R = 0;
+        break;
+      default:
+        formationDirection = ASSEMBLY_RIGHT_BOTTOM;
+        var C = cl;
+        var R = 0;
+        break;
+    }
+    col = C;
+    r = R;
+    while (i < count) {
+      cr = r + ',' + col;
+      if (isToTop(formationDirection) || isToRight(formationDirection)) {
+        PushFormationOrder(a, il - i++, [r, col]);
+        //a[cr] = il - i++;
+      }
+      else {
+        PushFormationOrder(a, i++, [r, col]);
+        //a[cr] = i++;
+      }
+      switch (formationDirection) {
+        case ASSEMBLY_BOTTOM_LEFT:
+        case ASSEMBLY_TOP_RIGHT:
+          col--;
+          r++;
+          break;
+        case ASSEMBLY_TOP_LEFT:
+        case ASSEMBLY_BOTTOM_RIGHT:
+          col++;
+          r--;
+          break;
+        case ASSEMBLY_LEFT_BOTTOM:
+        case ASSEMBLY_RIGHT_TOP:
+          col--;
+          r--;
+          break;
+        case ASSEMBLY_RIGHT_BOTTOM:
+        case ASSEMBLY_LEFT_TOP:
+        default:
+          col++;
+          r++;
+          break;
+      }
+      if (col < 0 || r < 0 || col > cl || r > rl) {
+        switch (formationDirection) {
+          case ASSEMBLY_BOTTOM_LEFT:
+          case ASSEMBLY_TOP_RIGHT:
+            C++;
+            break;
+          case ASSEMBLY_LEFT_BOTTOM:
+          case ASSEMBLY_RIGHT_TOP:
+          case ASSEMBLY_TOP_LEFT:
+          case ASSEMBLY_BOTTOM_RIGHT:
+            R++;
+            break;
+          case ASSEMBLY_RIGHT_BOTTOM:
+          case ASSEMBLY_LEFT_TOP:
+          default:
+            C--;
+            break;
+        }
+        if (C < 0 || R < 0 || C > cl || R > rl) {
+          switch (formationDirection) {
+            case ASSEMBLY_BOTTOM_LEFT:
+            case ASSEMBLY_TOP_RIGHT:
+              C = cl;
+              R++;
+              break;
+            case ASSEMBLY_TOP_LEFT:
+            case ASSEMBLY_BOTTOM_RIGHT:
+              R = rl;
+              C++;
+              break;
+            case ASSEMBLY_LEFT_BOTTOM:
+            case ASSEMBLY_RIGHT_TOP: R = rl; C--;
+              break;
+            case ASSEMBLY_RIGHT_BOTTOM:
+            case ASSEMBLY_LEFT_TOP:
+            default:
+              C = 0;
+              R++;
+              break;
+          }
+          if (R > rl)
+            R = rl;
+          else if (R < 0)
+            R = 0;
+          else if (C > cl)
+            C = cl;
+          else if (C < 0)
+            C = 0;
+        }
+        r = R;
+        col = C;
+      }
+    }
+    return a;
+  };
+
+  _This.$FormationSquare = function (transition) {
+    var cols = transition.$Cols || 1;
+    var rows = transition.$Rows || 1;
+    var arr = [];
+    var i = 0;
+    var col;
+    var r;
+    var dc;
+    var dr;
+    var cr;
+    dc = cols < rows ? (rows - cols) / 2 : 0;
+    dr = cols > rows ? (cols - rows) / 2 : 0;
+    cr = Math.round(Math.max(cols / 2, rows / 2)) + 1;
+    for (col = 0; col < cols; col++) {
+      for (r = 0; r < rows; r++)
+        PushFormationOrder(arr, cr - Math.min(col + 1 + dc, r + 1 + dr, cols - col + dc, rows - r + dr), [r, col]);
+    }
+    return arr;
+  };
+
+  _This.$FormationRectangle = function (transition) {
+    var cols = transition.$Cols || 1;
+    var rows = transition.$Rows || 1;
+    var arr = [];
+    var i = 0;
+    var col;
+    var r;
+    var cr;
+    cr = Math.round(Math.min(cols / 2, rows / 2)) + 1;
+    for (col = 0; col < cols; col++) {
+      for (r = 0; r < rows; r++)
+        PushFormationOrder(arr, cr - Math.min(col + 1, r + 1, cols - col, rows - r), [r, col]);
+    }
+    return arr;
+  };
+
+  _This.$FormationRandom = function (transition) {
+    var a = [];
+    var r, col, i;
+    for (r = 0; r < transition.$Rows; r++) {
+      for (col = 0; col < transition.$Cols; col++)
+        PushFormationOrder(a, Math.ceil(100000 * Math.random()) % 13, [r, col]);
+    }
+
+    return a;
+  };
+
+  _This.$FormationCircle = function (transition) {
+    var cols = transition.$Cols || 1;
+    var rows = transition.$Rows || 1;
+    var arr = [];
+    var i = 0;
+    var col;
+    var r;
+    var hc = cols / 2 - 0.5;
+    var hr = rows / 2 - 0.5;
+    for (col = 0; col < cols; col++) {
+      for (r = 0; r < rows; r++)
+        PushFormationOrder(arr, Math.round(Math.sqrt(Math.pow(col - hc, 2) + Math.pow(r - hr, 2))), [r, col]);
+    }
+    return arr;
+  };
+
+  _This.$FormationCross = function (transition) {
+    var cols = transition.$Cols || 1;
+    var rows = transition.$Rows || 1;
+    var arr = [];
+    var i = 0;
+    var col;
+    var r;
+    var hc = cols / 2 - 0.5;
+    var hr = rows / 2 - 0.5;
+    for (col = 0; col < cols; col++) {
+      for (r = 0; r < rows; r++)
+        PushFormationOrder(arr, Math.round(Math.min(Math.abs(col - hc), Math.abs(r - hr))), [r, col]);
+    }
+    return arr;
+  };
+
+  _This.$FormationRectangleCross = function (transition) {
+    var cols = transition.$Cols || 1;
+    var rows = transition.$Rows || 1;
+    var arr = [];
+    var i = 0;
+    var col;
+    var r;
+    var hc = cols / 2 - 0.5;
+    var hr = rows / 2 - 0.5;
+    var cr = Math.max(hc, hr) + 1;
+    for (col = 0; col < cols; col++) {
+      for (r = 0; r < rows; r++)
+        PushFormationOrder(arr, Math.round(cr - Math.max(hc - Math.abs(col - hc), hr - Math.abs(r - hr))) - 1, [r, col]);
+    }
+    return arr;
+  };
+};
+
+var $JssorSlideshowRunner$ = window.$JssorSlideshowRunner$ = function (slideContainer, slideContainerWidth, slideContainerHeight, slideshowOptions, isTouchDevice) {
+
+  var _SelfSlideshowRunner = this;
+
+  //var _State = 0; //-1 fullfill, 0 clean, 1 initializing, 2 stay, 3 playing
+  var _EndTime;
+
+  var _SliderFrameCount;
+
+  var _SlideshowPlayerBelow;
+  var _SlideshowPlayerAbove;
+
+  var _PrevItem;
+  var _SlideItem;
+
+  var _TransitionIndex = 0;
+  var _TransitionsOrder = slideshowOptions.$TransitionsOrder;
+
+  var _SlideshowTransition;
+
+  var _SlideshowPerformance = 8;
+
+  //#region Private Methods
+  function EnsureTransitionInstance(options, slideshowInterval) {
+
+    var slideshowTransition = {
+      $Interval: slideshowInterval,  //Delay to play next frame
+      $Duration: 1, //Duration to finish the entire transition
+      $Delay: 0,  //Delay to assembly blocks
+      $Cols: 1,   //Number of columns
+      $Rows: 1,   //Number of rows
+      $Opacity: 0,   //Fade block or not
+      $Zoom: 0,   //Zoom block or not
+      $Clip: 0,   //Clip block or not
+      $Move: false,   //Move block or not
+      $SlideOut: false,   //Slide the previous slide out to display next slide instead
+      //$FlyDirection: 0,   //Specify fly transform with direction
+      $Reverse: false,    //Reverse the assembly or not
+      $Formation: $JssorSlideshowFormations$.$FormationRandom,    //Shape that assembly blocks as
+      $Assembly: 0x0408,   //The way to assembly blocks ASSEMBLY_RIGHT_BOTTOM
+      $ChessMode: { $Column: 0, $Row: 0 },    //Chess move or fly direction
+      $Easing: $JssorEasing$.$EaseSwing,  //Specify variation of speed during transition
+      $Round: {},
+      $Blocks: [],
+      $During: {}
+    };
+
+    $Jssor$.$Extend(slideshowTransition, options);
+
+    slideshowTransition.$Count = slideshowTransition.$Cols * slideshowTransition.$Rows;
+    if ($Jssor$.$IsFunction(slideshowTransition.$Easing))
+      slideshowTransition.$Easing = { $Default: slideshowTransition.$Easing };
+
+    slideshowTransition.$FramesCount = Math.ceil(slideshowTransition.$Duration / slideshowTransition.$Interval);
+
+    slideshowTransition.$GetBlocks = function (width, height) {
+      width /= slideshowTransition.$Cols;
+      height /= slideshowTransition.$Rows;
+      var wh = width + 'x' + height;
+      if (!slideshowTransition.$Blocks[wh]) {
+        slideshowTransition.$Blocks[wh] = { $Width: width, $Height: height };
+        for (var col = 0; col < slideshowTransition.$Cols; col++) {
+          for (var r = 0; r < slideshowTransition.$Rows; r++)
+            slideshowTransition.$Blocks[wh][r + ',' + col] = { $Top: r * height, $Right: col * width + width, $Bottom: r * height + height, $Left: col * width };
+        }
+      }
+
+      return slideshowTransition.$Blocks[wh];
+    };
+
+    if (slideshowTransition.$Brother) {
+      slideshowTransition.$Brother = EnsureTransitionInstance(slideshowTransition.$Brother, slideshowInterval);
+      slideshowTransition.$SlideOut = true;
+    }
+
+    return slideshowTransition;
+  }
+  //#endregion
+
+  //#region Private Classes
+  function JssorSlideshowPlayer(slideContainer, slideElement, slideTransition, beginTime, slideContainerWidth, slideContainerHeight) {
+    var _Self = this;
+
+    var _Block;
+    var _StartStylesArr = {};
+    var _AnimationStylesArrs = {};
+    var _AnimationBlockItems = [];
+    var _StyleStart;
+    var _StyleEnd;
+    var _StyleDif;
+    var _ChessModeColumn = slideTransition.$ChessMode.$Column || 0;
+    var _ChessModeRow = slideTransition.$ChessMode.$Row || 0;
+
+    var _Blocks = slideTransition.$GetBlocks(slideContainerWidth, slideContainerHeight);
+    var _FormationInstance = GetFormation(slideTransition);
+    var _MaxOrder = _FormationInstance.length - 1;
+    var _Period = slideTransition.$Duration + slideTransition.$Delay * _MaxOrder;
+    var _EndTime = beginTime + _Period;
+
+    var _SlideOut = slideTransition.$SlideOut;
+    var _IsIn;
+
+    //_EndTime += $Jssor$.$IsBrowserChrome() ? 260 : 50;
+    _EndTime += 50;
+
+    //#region Private Methods
+
+    function GetFormation(transition) {
+
+      var formationInstance = transition.$Formation(transition);
+
+      return transition.$Reverse ? formationInstance.reverse() : formationInstance;
+
+    }
+    //#endregion
+
+    _Self.$EndTime = _EndTime;
+
+    _Self.$ShowFrame = function (time) {
+      time -= beginTime;
+
+      var isIn = time < _Period;
+
+      if (isIn || _IsIn) {
+        _IsIn = isIn;
+
+        if (!_SlideOut)
+          time = _Period - time;
+
+        var frameIndex = Math.ceil(time / slideTransition.$Interval);
+
+        $Jssor$.$Each(_AnimationStylesArrs, function (value, index) {
+
+          var itemFrameIndex = Math.max(frameIndex, value.$Min);
+          itemFrameIndex = Math.min(itemFrameIndex, value.length - 1);
+
+          if (value.$LastFrameIndex != itemFrameIndex) {
+            if (!value.$LastFrameIndex && !_SlideOut) {
+              $Jssor$.$ShowElement(_AnimationBlockItems[index]);
+            }
+            else if (itemFrameIndex == value.$Max && _SlideOut) {
+              $Jssor$.$HideElement(_AnimationBlockItems[index]);
+            }
+            value.$LastFrameIndex = itemFrameIndex;
+            $Jssor$.$SetStylesEx(_AnimationBlockItems[index], value[itemFrameIndex]);
+          }
+        });
+      }
+    };
+
+    //constructor
+    {
+      slideElement = $Jssor$.$CloneNode(slideElement);
+      //$Jssor$.$RemoveAttribute(slideElement, "id");
+      if ($Jssor$.$IsBrowserIe9Earlier()) {
+        var hasImage = !slideElement["no-image"];
+        var slideChildElements = $Jssor$.$FindChildrenByTag(slideElement);
+        $Jssor$.$Each(slideChildElements, function (slideChildElement) {
+          if (hasImage || slideChildElement["jssor-slider"])
+            $Jssor$.$CssOpacity(slideChildElement, $Jssor$.$CssOpacity(slideChildElement), true);
+        });
+      }
+
+      $Jssor$.$Each(_FormationInstance, function (formationItems, order) {
+        $Jssor$.$Each(formationItems, function (formationItem) {
+          var row = formationItem[0];
+          var col = formationItem[1];
+          {
+            var columnRow = row + ',' + col;
+
+            var chessHorizontal = false;
+            var chessVertical = false;
+            var chessRotate = false;
+
+            if (_ChessModeColumn && col % 2) {
+              if (_ChessModeColumn & 3/*$JssorDirection$.$IsHorizontal(_ChessModeColumn)*/) {
+                chessHorizontal = !chessHorizontal;
+              }
+              if (_ChessModeColumn & 12/*$JssorDirection$.$IsVertical(_ChessModeColumn)*/) {
+                chessVertical = !chessVertical;
+              }
+
+              if (_ChessModeColumn & 16)
+                chessRotate = !chessRotate;
+            }
+
+            if (_ChessModeRow && row % 2) {
+              if (_ChessModeRow & 3/*$JssorDirection$.$IsHorizontal(_ChessModeRow)*/) {
+                chessHorizontal = !chessHorizontal;
+              }
+              if (_ChessModeRow & 12/*$JssorDirection$.$IsVertical(_ChessModeRow)*/) {
+                chessVertical = !chessVertical;
+              }
+              if (_ChessModeRow & 16)
+                chessRotate = !chessRotate;
+            }
+
+            slideTransition.$Top = slideTransition.$Top || (slideTransition.$Clip & 4);
+            slideTransition.$Bottom = slideTransition.$Bottom || (slideTransition.$Clip & 8);
+            slideTransition.$Left = slideTransition.$Left || (slideTransition.$Clip & 1);
+            slideTransition.$Right = slideTransition.$Right || (slideTransition.$Clip & 2);
+
+            var topBenchmark = chessVertical ? slideTransition.$Bottom : slideTransition.$Top;
+            var bottomBenchmark = chessVertical ? slideTransition.$Top : slideTransition.$Bottom;
+            var leftBenchmark = chessHorizontal ? slideTransition.$Right : slideTransition.$Left;
+            var rightBenchmark = chessHorizontal ? slideTransition.$Left : slideTransition.$Right;
+
+            slideTransition.$Clip = topBenchmark || bottomBenchmark || leftBenchmark || rightBenchmark;
+
+            _StyleDif = {};
+            _StyleEnd = { $Top: 0, $Left: 0, $Opacity: 1, $Width: slideContainerWidth, $Height: slideContainerHeight };
+            _StyleStart = $Jssor$.$Extend({}, _StyleEnd);
+            _Block = $Jssor$.$Extend({}, _Blocks[columnRow]);
+
+            if (slideTransition.$Opacity) {
+              _StyleEnd.$Opacity = 2 - slideTransition.$Opacity;
+            }
+
+            if (slideTransition.$ZIndex) {
+              _StyleEnd.$ZIndex = slideTransition.$ZIndex;
+              _StyleStart.$ZIndex = 0;
+            }
+
+            var allowClip = slideTransition.$Cols * slideTransition.$Rows > 1 || slideTransition.$Clip;
+
+            if (slideTransition.$Zoom || slideTransition.$Rotate) {
+              var allowRotate = true;
+              if ($Jssor$.$IsBrowserIe9Earlier()) {
+                if (slideTransition.$Cols * slideTransition.$Rows > 1)
+                  allowRotate = false;
+                else
+                  allowClip = false;
+              }
+
+              if (allowRotate) {
+                _StyleEnd.$Zoom = slideTransition.$Zoom ? slideTransition.$Zoom - 1 : 1;
+                _StyleStart.$Zoom = 1;
+
+                if ($Jssor$.$IsBrowserIe9Earlier() || $Jssor$.$IsBrowserOpera())
+                  _StyleEnd.$Zoom = Math.min(_StyleEnd.$Zoom, 2);
+
+                var rotate = slideTransition.$Rotate;
+
+                _StyleEnd.$Rotate = rotate * 360 * ((chessRotate) ? -1 : 1);
+                _StyleStart.$Rotate = 0;
+              }
+            }
+
+            if (allowClip) {
+              if (slideTransition.$Clip) {
+                var clipScale = slideTransition.$ScaleClip || 1;
+                var blockOffset = _Block.$Offset = {};
+                if (topBenchmark && bottomBenchmark) {
+                  blockOffset.$Top = _Blocks.$Height / 2 * clipScale;
+                  blockOffset.$Bottom = -blockOffset.$Top;
+                }
+                else if (topBenchmark) {
+                  blockOffset.$Bottom = -_Blocks.$Height * clipScale;
+                }
+                else if (bottomBenchmark) {
+                  blockOffset.$Top = _Blocks.$Height * clipScale;
+                }
+
+                if (leftBenchmark && rightBenchmark) {
+                  blockOffset.$Left = _Blocks.$Width / 2 * clipScale;
+                  blockOffset.$Right = -blockOffset.$Left;
+                }
+                else if (leftBenchmark) {
+                  blockOffset.$Right = -_Blocks.$Width * clipScale;
+                }
+                else if (rightBenchmark) {
+                  blockOffset.$Left = _Blocks.$Width * clipScale;
+                }
+              }
+
+              _StyleDif.$Clip = _Block;
+              _StyleStart.$Clip = _Blocks[columnRow];
+            }
+
+            //fly
+            {
+              var chessHor = chessHorizontal ? 1 : -1;
+              var chessVer = chessVertical ? 1 : -1;
+
+              if (slideTransition.x)
+                _StyleEnd.$Left += slideContainerWidth * slideTransition.x * chessHor;
+
+              if (slideTransition.y)
+                _StyleEnd.$Top += slideContainerHeight * slideTransition.y * chessVer;
+            }
+
+            $Jssor$.$Each(_StyleEnd, function (propertyEnd, property) {
+              if ($Jssor$.$IsNumeric(propertyEnd)) {
+                if (propertyEnd != _StyleStart[property]) {
+                  _StyleDif[property] = propertyEnd - _StyleStart[property];
+                }
+              }
+            });
+
+            _StartStylesArr[columnRow] = _SlideOut ? _StyleStart : _StyleEnd;
+
+            var animationStylesArr = [];
+            var framesCount = slideTransition.$FramesCount;
+            var virtualFrameCount = Math.round(order * slideTransition.$Delay / slideTransition.$Interval);
+            _AnimationStylesArrs[columnRow] = new Array(virtualFrameCount);
+            _AnimationStylesArrs[columnRow].$Min = virtualFrameCount;
+            _AnimationStylesArrs[columnRow].$Max = virtualFrameCount + framesCount - 1;
+
+            for (var frameN = 0; frameN <= framesCount; frameN++) {
+              var styleFrameN = $Jssor$.$Cast(_StyleStart, _StyleDif, frameN / framesCount, slideTransition.$Easing, slideTransition.$During, slideTransition.$Round, { $Move: slideTransition.$Move, $OriginalWidth: slideContainerWidth, $OriginalHeight: slideContainerHeight })
+
+              styleFrameN.$ZIndex = styleFrameN.$ZIndex || 1;
+
+              _AnimationStylesArrs[columnRow].push(styleFrameN);
+            }
+
+          } //for
+        });
+      });
+
+      _FormationInstance.reverse();
+      $Jssor$.$Each(_FormationInstance, function (formationItems) {
+        $Jssor$.$Each(formationItems, function (formationItem) {
+          var row = formationItem[0];
+          var col = formationItem[1];
+
+          var columnRow = row + ',' + col;
+
+          var image = slideElement;
+          if (col || row)
+            image = $Jssor$.$CloneNode(slideElement);
+
+          $Jssor$.$SetStyles(image, _StartStylesArr[columnRow]);
+          $Jssor$.$CssOverflow(image, "hidden");
+
+          $Jssor$.$CssPosition(image, "absolute");
+          slideContainer.$AddClipElement(image);
+          _AnimationBlockItems[columnRow] = image;
+          $Jssor$.$ShowElement(image, !_SlideOut);
+        });
+      });
+    }
+  }
+
+  function SlideshowProcessor() {
+    var _SelfSlideshowProcessor = this;
+    var _CurrentTime = 0;
+
+    $JssorAnimator$.call(_SelfSlideshowProcessor, 0, _EndTime);
+
+    _SelfSlideshowProcessor.$OnPositionChange = function (oldPosition, newPosition) {
+      if ((newPosition - _CurrentTime) > _SlideshowPerformance) {
+        _CurrentTime = newPosition;
+
+        _SlideshowPlayerAbove && _SlideshowPlayerAbove.$ShowFrame(newPosition);
+        _SlideshowPlayerBelow && _SlideshowPlayerBelow.$ShowFrame(newPosition);
+      }
+    };
+
+    _SelfSlideshowProcessor.$Transition = _SlideshowTransition;
+  }
+  //#endregion
+
+  //member functions
+  _SelfSlideshowRunner.$GetTransition = function (slideCount) {
+    var n = 0;
+
+    var transitions = slideshowOptions.$Transitions;
+
+    var transitionCount = transitions.length;
+
+    if (_TransitionsOrder) { /*Sequence*/
+      //if (transitionCount > slideCount && ($Jssor$.$IsBrowserChrome() || $Jssor$.$IsBrowserSafari() || $Jssor$.$IsBrowserFireFox())) {
+      //    transitionCount -= transitionCount % slideCount;
+      //}
+      n = _TransitionIndex++ % transitionCount;
+    }
+    else { /*Random*/
+      n = Math.floor(Math.random() * transitionCount);
+    }
+
+    transitions[n] && (transitions[n].$Index = n);
+
+    return transitions[n];
+  };
+
+  _SelfSlideshowRunner.$Initialize = function (slideIndex, prevIndex, slideItem, prevItem, slideshowTransition) {
+    $JssorDebug$.$Execute(function () {
+      if (_SlideshowPlayerBelow) {
+        $JssorDebug$.$Fail("slideshow runner has not been cleared.");
+      }
+    });
+
+    _SlideshowTransition = slideshowTransition;
+
+    slideshowTransition = EnsureTransitionInstance(slideshowTransition, _SlideshowPerformance);
+
+    _SlideItem = slideItem;
+    _PrevItem = prevItem;
+
+    var prevSlideElement = prevItem.$Item;
+    var currentSlideElement = slideItem.$Item;
+    prevSlideElement["no-image"] = !prevItem.$Image;
+    currentSlideElement["no-image"] = !slideItem.$Image;
+
+    var slideElementAbove = prevSlideElement;
+    var slideElementBelow = currentSlideElement;
+
+    var slideTransitionAbove = slideshowTransition;
+    var slideTransitionBelow = slideshowTransition.$Brother || EnsureTransitionInstance({}, _SlideshowPerformance);
+
+    if (!slideshowTransition.$SlideOut) {
+      slideElementAbove = currentSlideElement;
+      slideElementBelow = prevSlideElement;
+    }
+
+    var shift = slideTransitionBelow.$Shift || 0;
+
+    _SlideshowPlayerBelow = new JssorSlideshowPlayer(slideContainer, slideElementBelow, slideTransitionBelow, Math.max(shift - slideTransitionBelow.$Interval, 0), slideContainerWidth, slideContainerHeight);
+    _SlideshowPlayerAbove = new JssorSlideshowPlayer(slideContainer, slideElementAbove, slideTransitionAbove, Math.max(slideTransitionBelow.$Interval - shift, 0), slideContainerWidth, slideContainerHeight);
+
+    _SlideshowPlayerBelow.$ShowFrame(0);
+    _SlideshowPlayerAbove.$ShowFrame(0);
+
+    _EndTime = Math.max(_SlideshowPlayerBelow.$EndTime, _SlideshowPlayerAbove.$EndTime);
+
+    _SelfSlideshowRunner.$Index = slideIndex;
+  };
+
+  _SelfSlideshowRunner.$Clear = function () {
+    slideContainer.$Clear();
+    _SlideshowPlayerBelow = null;
+    _SlideshowPlayerAbove = null;
+  };
+
+  _SelfSlideshowRunner.$GetProcessor = function () {
+    var slideshowProcessor = null;
+
+    if (_SlideshowPlayerAbove)
+      slideshowProcessor = new SlideshowProcessor();
+
+    return slideshowProcessor;
+  };
+
+  //Constructor
+  {
+    if ($Jssor$.$IsBrowserIe9Earlier() || $Jssor$.$IsBrowserOpera() || (isTouchDevice && $Jssor$.$WebKitVersion() < 537)) {
+      _SlideshowPerformance = 16;
+    }
+
+    $JssorObject$.call(_SelfSlideshowRunner);
+    $JssorAnimator$.call(_SelfSlideshowRunner, -10000000, 10000000);
+  }
+};
+
+var $JssorSlider$ = window.$JssorSlider$ = function (elmt, options) {
+  var _SelfSlider = this;
+
+  //#region Private Classes
+  //Conveyor
+  function Conveyor() {
+    var _SelfConveyor = this;
+    $JssorAnimator$.call(_SelfConveyor, -100000000, 200000000);
+
+    _SelfConveyor.$GetCurrentSlideInfo = function () {
+      var positionDisplay = _SelfConveyor.$GetPosition_Display();
+      var virtualIndex = Math.floor(positionDisplay);
+      var slideIndex = GetRealIndex(virtualIndex);
+      var slidePosition = positionDisplay - Math.floor(positionDisplay);
+
+      return { $Index: slideIndex, $VirtualIndex: virtualIndex, $Position: slidePosition };
+    };
+
+    _SelfConveyor.$OnPositionChange = function (oldPosition, newPosition) {
+
+      var index = Math.floor(newPosition);
+      if (index != newPosition && newPosition > oldPosition)
+        index++;
+
+      ResetNavigator(index, true);
+
+      _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_POSITION_CHANGE, GetRealIndex(newPosition), GetRealIndex(oldPosition), newPosition, oldPosition);
+    };
+  }
+  //Conveyor
+
+  //Carousel
+  function Carousel() {
+    var _SelfCarousel = this;
+
+    $JssorAnimator$.call(_SelfCarousel, 0, 0, { $LoopLength: _SlideCount });
+
+    //Carousel Constructor
+    {
+      $Jssor$.$Each(_SlideItems, function (slideItem) {
+        (_Loop & 1) && slideItem.$SetLoopLength(_SlideCount);
+        _SelfCarousel.$Chain(slideItem);
+        slideItem.$Shift(_ParkingPosition / _StepLength);
+      });
+    }
+  }
+  //Carousel
+
+  //Slideshow
+  function Slideshow() {
+    var _SelfSlideshow = this;
+    var _Wrapper = _SlideContainer.$Elmt;
+
+    $JssorAnimator$.call(_SelfSlideshow, -1, 2, { $Easing: $JssorEasing$.$EaseLinear, $Setter: { $Position: SetPosition }, $LoopLength: _SlideCount }, _Wrapper, { $Position: 1 }, { $Position: -2 });
+
+    _SelfSlideshow.$Wrapper = _Wrapper;
+
+    //Slideshow Constructor
+    {
+      $JssorDebug$.$Execute(function () {
+        $Jssor$.$Attribute(_SlideContainer.$Elmt, "debug-id", "slide_container");
+      });
+    }
+  }
+  //Slideshow
+
+  //CarouselPlayer
+  function CarouselPlayer(carousel, slideshow) {
+    var _SelfCarouselPlayer = this;
+    var _FromPosition;
+    var _ToPosition;
+    var _Duration;
+    var _StandBy;
+    var _StandByPosition;
+
+    $JssorAnimator$.call(_SelfCarouselPlayer, -100000000, 200000000, { $IntervalMax: 100 });
+
+    _SelfCarouselPlayer.$OnStart = function () {
+      _IsSliding = true;
+      _LoadingTicket = null;
+
+      //EVT_SWIPE_START
+      _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_SWIPE_START, GetRealIndex(_Conveyor.$GetPosition()), _Conveyor.$GetPosition());
+    };
+
+    _SelfCarouselPlayer.$OnStop = function () {
+
+      _IsSliding = false;
+      _StandBy = false;
+
+      var currentSlideInfo = _Conveyor.$GetCurrentSlideInfo();
+
+      //EVT_SWIPE_END
+      _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_SWIPE_END, GetRealIndex(_Conveyor.$GetPosition()), _Conveyor.$GetPosition());
+
+      if (!currentSlideInfo.$Position) {
+        OnPark(currentSlideInfo.$VirtualIndex, _CurrentSlideIndex);
+      }
+    };
+
+    _SelfCarouselPlayer.$OnPositionChange = function (oldPosition, newPosition) {
+
+      var toPosition;
+
+      if (_StandBy)
+        toPosition = _StandByPosition;
+      else {
+        toPosition = _ToPosition;
+
+        if (_Duration) {
+          var interPosition = newPosition / _Duration;
+          toPosition = _Options.$SlideEasing(interPosition) * (_ToPosition - _FromPosition) + _FromPosition;
+        }
+      }
+
+      _Conveyor.$GoToPosition(toPosition);
+    };
+
+    _SelfCarouselPlayer.$PlayCarousel = function (fromPosition, toPosition, duration, callback) {
+      $JssorDebug$.$Execute(function () {
+        if (_SelfCarouselPlayer.$IsPlaying())
+          $JssorDebug$.$Fail("The carousel is already playing.");
+      });
+
+      _FromPosition = fromPosition;
+      _ToPosition = toPosition;
+      _Duration = duration;
+
+      _Conveyor.$GoToPosition(fromPosition);
+      _SelfCarouselPlayer.$GoToPosition(0);
+
+      _SelfCarouselPlayer.$PlayToPosition(duration, callback);
+    };
+
+    _SelfCarouselPlayer.$StandBy = function (standByPosition) {
+      _StandBy = true;
+      _StandByPosition = standByPosition;
+      _SelfCarouselPlayer.$Play(standByPosition, null, true);
+    };
+
+    _SelfCarouselPlayer.$SetStandByPosition = function (standByPosition) {
+      _StandByPosition = standByPosition;
+    };
+
+    _SelfCarouselPlayer.$MoveCarouselTo = function (position) {
+      _Conveyor.$GoToPosition(position);
+    };
+
+    //CarouselPlayer Constructor
+    {
+      _Conveyor = new Conveyor();
+
+      _Conveyor.$Combine(carousel);
+      _Conveyor.$Combine(slideshow);
+    }
+  }
+  //CarouselPlayer
+
+  //SlideContainer
+  function SlideContainer() {
+    var _Self = this;
+    var elmt = CreatePanel();
+
+    $Jssor$.$CssZIndex(elmt, 0);
+    $Jssor$.$Css(elmt, "pointerEvents", "none");
+
+    _Self.$Elmt = elmt;
+
+    _Self.$AddClipElement = function (clipElement) {
+      $Jssor$.$AppendChild(elmt, clipElement);
+      $Jssor$.$ShowElement(elmt);
+    };
+
+    _Self.$Clear = function () {
+      $Jssor$.$HideElement(elmt);
+      $Jssor$.$Empty(elmt);
+    };
+  }
+  //SlideContainer
+
+  //SlideItem
+  function SlideItem(slideElmt, slideIndex) {
+
+    var _SelfSlideItem = this;
+
+    var _CaptionSliderIn;
+    var _CaptionSliderOut;
+    var _CaptionSliderCurrent;
+    var _IsCaptionSliderPlayingWhenDragStart;
+
+    var _Wrapper;
+    var _BaseElement = slideElmt;
+
+    var _LoadingScreen;
+
+    var _ImageItem;
+    var _ImageElmts = [];
+    var _LinkItemOrigin;
+    var _LinkItem;
+    var _ImageLoading;
+    var _ImageLoaded;
+    var _ImageLazyLoading;
+    var _ContentRefreshed;
+
+    var _Processor;
+
+    var _PlayerInstanceElement;
+    var _PlayerInstance;
+
+    var _SequenceNumber;    //for debug only
+
+    $JssorAnimator$.call(_SelfSlideItem, -_DisplayPieces, _DisplayPieces + 1, { $SlideItemAnimator: true });
+
+    function ResetCaptionSlider(fresh) {
+      _CaptionSliderOut && _CaptionSliderOut.$Revert();
+      _CaptionSliderIn && _CaptionSliderIn.$Revert();
+
+      RefreshContent(slideElmt, fresh);
+      _ContentRefreshed = true;
+
+      _CaptionSliderIn = new _CaptionSliderOptions.$Class(slideElmt, _CaptionSliderOptions, 1);
+      $JssorDebug$.$LiveStamp(_CaptionSliderIn, "caption_slider_" + _CaptionSliderCount + "_in");
+      _CaptionSliderOut = new _CaptionSliderOptions.$Class(slideElmt, _CaptionSliderOptions);
+      $JssorDebug$.$LiveStamp(_CaptionSliderOut, "caption_slider_" + _CaptionSliderCount + "_out");
+
+      $JssorDebug$.$Execute(function () {
+        _CaptionSliderCount++;
+      });
+
+      _CaptionSliderOut.$GoToPosition(0);
+      _CaptionSliderIn.$GoToPosition(0);
+    }
+
+    function EnsureCaptionSliderVersion() {
+      if (_CaptionSliderIn.$Version < _CaptionSliderOptions.$Version) {
+        ResetCaptionSlider();
+      }
+    }
+
+    //event handling begin
+    function LoadImageCompleteEventHandler(completeCallback, loadingScreen, image) {
+      if (!_ImageLoaded) {
+        _ImageLoaded = true;
+
+        if (_ImageItem && image) {
+          var imageWidth = image.width;
+          var imageHeight = image.height;
+          var fillWidth = imageWidth;
+          var fillHeight = imageHeight;
+
+          if (imageWidth && imageHeight && _Options.$FillMode) {
+
+            //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, actual size for small image, default value is 0
+            if (_Options.$FillMode & 3 && (!(_Options.$FillMode & 4) || imageWidth > _SlideWidth || imageHeight > _SlideHeight)) {
+              var fitHeight = false;
+              var ratio = _SlideWidth / _SlideHeight * imageHeight / imageWidth;
+
+              if (_Options.$FillMode & 1) {
+                fitHeight = (ratio > 1);
+              }
+              else if (_Options.$FillMode & 2) {
+                fitHeight = (ratio < 1);
+              }
+              fillWidth = fitHeight ? imageWidth * _SlideHeight / imageHeight : _SlideWidth;
+              fillHeight = fitHeight ? _SlideHeight : imageHeight * _SlideWidth / imageWidth;
+            }
+
+            $Jssor$.$CssWidth(_ImageItem, fillWidth);
+            $Jssor$.$CssHeight(_ImageItem, fillHeight);
+            $Jssor$.$CssTop(_ImageItem, (_SlideHeight - fillHeight) / 2);
+            $Jssor$.$CssLeft(_ImageItem, (_SlideWidth - fillWidth) / 2);
+          }
+
+          $Jssor$.$CssPosition(_ImageItem, "absolute");
+
+          _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_LOAD_END, slideIndex);
+        }
+      }
+
+      $Jssor$.$HideElement(loadingScreen);
+      completeCallback && completeCallback(_SelfSlideItem);
+    }
+
+    function LoadSlideshowImageCompleteEventHandler(nextIndex, nextItem, slideshowTransition, loadingTicket) {
+      if (loadingTicket == _LoadingTicket && _CurrentSlideIndex == slideIndex && _AutoPlay) {
+        if (!_Frozen) {
+          var nextRealIndex = GetRealIndex(nextIndex);
+          _SlideshowRunner.$Initialize(nextRealIndex, slideIndex, nextItem, _SelfSlideItem, slideshowTransition);
+          nextItem.$HideContentForSlideshow();
+          _Slideshow.$Locate(nextRealIndex, 1);
+          _Slideshow.$GoToPosition(nextRealIndex);
+          _CarouselPlayer.$PlayCarousel(nextIndex, nextIndex, 0);
+        }
+      }
+    }
+
+    function SlideReadyEventHandler(loadingTicket) {
+      if (loadingTicket == _LoadingTicket && _CurrentSlideIndex == slideIndex) {
+
+        if (!_Processor) {
+          var slideshowProcessor = null;
+          if (_SlideshowRunner) {
+            if (_SlideshowRunner.$Index == slideIndex)
+              slideshowProcessor = _SlideshowRunner.$GetProcessor();
+            else
+              _SlideshowRunner.$Clear();
+          }
+
+          EnsureCaptionSliderVersion();
+
+          _Processor = new Processor(slideElmt, slideIndex, slideshowProcessor, _SelfSlideItem.$GetCaptionSliderIn(), _SelfSlideItem.$GetCaptionSliderOut());
+          _Processor.$SetPlayer(_PlayerInstance);
+        }
+
+        !_Processor.$IsPlaying() && _Processor.$Replay();
+      }
+    }
+
+    function ParkEventHandler(currentIndex, previousIndex, manualActivate) {
+      if (currentIndex == slideIndex) {
+
+        if (currentIndex != previousIndex)
+          _SlideItems[previousIndex] && _SlideItems[previousIndex].$ParkOut();
+        else
+          !manualActivate && _Processor && _Processor.$AdjustIdleOnPark();
+
+        _PlayerInstance && _PlayerInstance.$Enable();
+
+        //park in
+        var loadingTicket = _LoadingTicket = $Jssor$.$GetNow();
+        _SelfSlideItem.$LoadImage($Jssor$.$CreateCallback(null, SlideReadyEventHandler, loadingTicket));
+      }
+      else {
+        var distance = Math.abs(slideIndex - currentIndex);
+        var loadRange = _DisplayPieces + _Options.$LazyLoading - 1;
+        if (!_ImageLazyLoading || distance <= loadRange) {
+          _SelfSlideItem.$LoadImage();
+        }
+      }
+    }
+
+    function SwipeStartEventHandler() {
+      if (_CurrentSlideIndex == slideIndex && _Processor) {
+        _Processor.$Stop();
+        _PlayerInstance && _PlayerInstance.$Quit();
+        _PlayerInstance && _PlayerInstance.$Disable();
+        _Processor.$OpenSlideshowPanel();
+      }
+    }
+
+    function FreezeEventHandler() {
+      if (_CurrentSlideIndex == slideIndex && _Processor) {
+        _Processor.$Stop();
+      }
+    }
+
+    function ContentClickEventHandler(event) {
+      if (_LastDragSucceded) {
+        $Jssor$.$StopEvent(event);
+
+        var checkElement = $Jssor$.$EvtSrc(event);
+        while (checkElement && slideElmt !== checkElement) {
+          if (checkElement.tagName == "A") {
+            $Jssor$.$CancelEvent(event);
+          }
+          try {
+            checkElement = checkElement.parentNode;
+          } catch (e) {
+            // Firefox sometimes fires events for XUL elements, which throws
+            // a "permission denied" error. so this is not a child.
+            break;
+          }
+        }
+      }
+    }
+
+    function SlideClickEventHandler(event) {
+      if (!_LastDragSucceded) {
+        _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_CLICK, slideIndex, event);
+      }
+    }
+
+    function PlayerAvailableEventHandler() {
+      _PlayerInstance = _PlayerInstanceElement.pInstance;
+      _Processor && _Processor.$SetPlayer(_PlayerInstance);
+    }
+
+    _SelfSlideItem.$LoadImage = function (completeCallback, loadingScreen) {
+      loadingScreen = loadingScreen || _LoadingScreen;
+
+      if (_ImageElmts.length && !_ImageLoaded) {
+
+        $Jssor$.$ShowElement(loadingScreen);
+
+        if (!_ImageLoading) {
+          _ImageLoading = true;
+          _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_LOAD_START, slideIndex);
+
+          $Jssor$.$Each(_ImageElmts, function (imageElmt) {
+
+            if (!$Jssor$.$Attribute(imageElmt, "src")) {
+              imageElmt.src = $Jssor$.$AttributeEx(imageElmt, "src2");
+              $Jssor$.$CssDisplay(imageElmt, imageElmt["display-origin"]);
+            }
+          });
+        }
+        $Jssor$.$LoadImages(_ImageElmts, _ImageItem, $Jssor$.$CreateCallback(null, LoadImageCompleteEventHandler, completeCallback, loadingScreen));
+      }
+      else {
+        LoadImageCompleteEventHandler(completeCallback, loadingScreen);
+      }
+    };
+
+    _SelfSlideItem.$GoForNextSlide = function () {
+
+      var index = slideIndex;
+      if (_Options.$AutoPlaySteps < 0)
+        index -= _SlideCount;
+
+      var nextIndex = index + _Options.$AutoPlaySteps * _PlayReverse;
+
+      if (_Loop & 2) {
+        //Rewind
+        nextIndex = GetRealIndex(nextIndex);
+      }
+      if (!(_Loop & 1)) {
+        //Stop at threshold
+        nextIndex = Math.max(0, Math.min(nextIndex, _SlideCount - _DisplayPieces));
+      }
+
+      if (nextIndex != slideIndex) {
+        if (_SlideshowRunner) {
+          var slideshowTransition = _SlideshowRunner.$GetTransition(_SlideCount);
+
+          if (slideshowTransition) {
+            var loadingTicket = _LoadingTicket = $Jssor$.$GetNow();
+
+            var nextItem = _SlideItems[GetRealIndex(nextIndex)];
+            return nextItem.$LoadImage($Jssor$.$CreateCallback(null, LoadSlideshowImageCompleteEventHandler, nextIndex, nextItem, slideshowTransition, loadingTicket), _LoadingScreen);
+          }
+        }
+
+        PlayTo(nextIndex);
+      }
+    };
+
+    _SelfSlideItem.$TryActivate = function () {
+      ParkEventHandler(slideIndex, slideIndex, true);
+    };
+
+    _SelfSlideItem.$ParkOut = function () {
+      //park out
+      _PlayerInstance && _PlayerInstance.$Quit();
+      _PlayerInstance && _PlayerInstance.$Disable();
+      _SelfSlideItem.$UnhideContentForSlideshow();
+      _Processor && _Processor.$Abort();
+      _Processor = null;
+      ResetCaptionSlider();
+    };
+
+    //for debug only
+    _SelfSlideItem.$StampSlideItemElements = function (stamp) {
+      stamp = _SequenceNumber + "_" + stamp;
+
+      $JssorDebug$.$Execute(function () {
+        if (_ImageItem)
+          $Jssor$.$Attribute(_ImageItem, "debug-id", stamp + "_slide_item_image_id");
+
+        $Jssor$.$Attribute(slideElmt, "debug-id", stamp + "_slide_item_item_id");
+      });
+
+      $JssorDebug$.$Execute(function () {
+        $Jssor$.$Attribute(_Wrapper, "debug-id", stamp + "_slide_item_wrapper_id");
+      });
+
+      $JssorDebug$.$Execute(function () {
+        $Jssor$.$Attribute(_LoadingScreen, "debug-id", stamp + "_loading_container_id");
+      });
+    };
+
+    _SelfSlideItem.$HideContentForSlideshow = function () {
+      $Jssor$.$HideElement(slideElmt);
+    };
+
+    _SelfSlideItem.$UnhideContentForSlideshow = function () {
+      $Jssor$.$ShowElement(slideElmt);
+    };
+
+    _SelfSlideItem.$EnablePlayer = function () {
+      _PlayerInstance && _PlayerInstance.$Enable();
+    };
+
+    function RefreshContent(elmt, fresh, level) {
+      $JssorDebug$.$Execute(function () {
+        if ($Jssor$.$Attribute(elmt, "jssor-slider"))
+          $JssorDebug$.$Log("Child slider found.");
+      });
+
+      if ($Jssor$.$Attribute(elmt, "jssor-slider"))
+        return;
+
+      level = level || 0;
+
+      if (!_ContentRefreshed) {
+        if (elmt.tagName == "IMG") {
+          _ImageElmts.push(elmt);
+
+          if (!$Jssor$.$Attribute(elmt, "src")) {
+            _ImageLazyLoading = true;
+            elmt["display-origin"] = $Jssor$.$CssDisplay(elmt);
+            $Jssor$.$HideElement(elmt);
+          }
+        }
+        if ($Jssor$.$IsBrowserIe9Earlier()) {
+          $Jssor$.$CssZIndex(elmt, ($Jssor$.$CssZIndex(elmt) || 0) + 1);
+        }
+        if (_Options.$HWA && $Jssor$.$WebKitVersion()) {
+          if ($Jssor$.$WebKitVersion() < 534 || (!_SlideshowEnabled && !$Jssor$.$IsBrowserChrome())) {
+            $Jssor$.$EnableHWA(elmt);
+          }
+        }
+      }
+
+      var childElements = $Jssor$.$Children(elmt);
+
+      $Jssor$.$Each(childElements, function (childElement, i) {
+
+        var childTagName = childElement.tagName;
+        var uAttribute = $Jssor$.$AttributeEx(childElement, "u");
+        if (uAttribute == "player" && !_PlayerInstanceElement) {
+          _PlayerInstanceElement = childElement;
+          if (_PlayerInstanceElement.pInstance) {
+            PlayerAvailableEventHandler();
+          }
+          else {
+            $Jssor$.$AddEvent(_PlayerInstanceElement, "dataavailable", PlayerAvailableEventHandler);
+          }
+        }
+
+        if (uAttribute == "caption") {
+          if (!$Jssor$.$IsBrowserIE() && !fresh) {
+
+            //if (childTagName == "A") {
+            //    $Jssor$.$RemoveEvent(childElement, "click", ContentClickEventHandler);
+            //    $Jssor$.$Attribute(childElement, "jssor-content", null);
+            //}
+
+            var captionElement = $Jssor$.$CloneNode(childElement, false, true);
+            $Jssor$.$InsertBefore(captionElement, childElement, elmt);
+            $Jssor$.$RemoveElement(childElement, elmt);
+            childElement = captionElement;
+
+            fresh = true;
+          }
+        }
+        else if (!_ContentRefreshed && !level && !_ImageItem) {
+
+          if (childTagName == "A") {
+            if ($Jssor$.$AttributeEx(childElement, "u") == "image") {
+              _ImageItem = $Jssor$.$FindChildByTag(childElement, "IMG");
+
+              $JssorDebug$.$Execute(function () {
+                if (!_ImageItem) {
+                  $JssorDebug$.$Error("slide html code definition error, no 'IMG' found in a 'image with link' slide.\r\n" + elmt.outerHTML);
+                }
+              });
+            }
+            else {
+              _ImageItem = $Jssor$.$FindChild(childElement, "image", true);
+            }
+
+            if (_ImageItem) {
+              _LinkItemOrigin = childElement;
+              $Jssor$.$SetStyles(_LinkItemOrigin, _StyleDef);
+
+              _LinkItem = $Jssor$.$CloneNode(_LinkItemOrigin, true);
+              //$Jssor$.$AddEvent(_LinkItem, "click", ContentClickEventHandler);
+
+              $Jssor$.$CssDisplay(_LinkItem, "block");
+              $Jssor$.$SetStyles(_LinkItem, _StyleDef);
+              $Jssor$.$CssOpacity(_LinkItem, 0);
+              $Jssor$.$Css(_LinkItem, "backgroundColor", "#000");
+            }
+          }
+          else if (childTagName == "IMG" && $Jssor$.$AttributeEx(childElement, "u") == "image") {
+            _ImageItem = childElement;
+          }
+
+          if (_ImageItem) {
+            _ImageItem.border = 0;
+            $Jssor$.$SetStyles(_ImageItem, _StyleDef);
+          }
+        }
+
+        //if (!$Jssor$.$Attribute(childElement, "jssor-content")) {
+        //    //cancel click event on <A> element when a drag of slide succeeded
+        //    $Jssor$.$AddEvent(childElement, "click", ContentClickEventHandler);
+        //    $Jssor$.$Attribute(childElement, "jssor-content", true);
+        //}
+
+        RefreshContent(childElement, fresh, level +1);
+      });
+    }
+
+    _SelfSlideItem.$OnInnerOffsetChange = function (oldOffset, newOffset) {
+      var slidePosition = _DisplayPieces - newOffset;
+
+      SetPosition(_Wrapper, slidePosition);
+
+      //following lines are for future usage, not ready yet
+      //if (!_IsDragging || !_IsCaptionSliderPlayingWhenDragStart) {
+      //    var _DealWithParallax;
+      //    if (IsCurrentSlideIndex(slideIndex)) {
+      //        if (_CaptionSliderOptions.$PlayOutMode == 2)
+      //            _DealWithParallax = true;
+      //    }
+      //    else {
+      //        if (!_CaptionSliderOptions.$PlayInMode) {
+      //            //PlayInMode: 0 none
+      //            _CaptionSliderIn.$GoToEnd();
+      //        }
+      //        //else if (_CaptionSliderOptions.$PlayInMode == 1) {
+      //        //    //PlayInMode: 1 chain
+      //        //    _CaptionSliderIn.$GoToPosition(0);
+      //        //}
+      //        else if (_CaptionSliderOptions.$PlayInMode == 2) {
+      //            //PlayInMode: 2 parallel
+      //            _DealWithParallax = true;
+      //        }
+      //    }
+
+      //    if (_DealWithParallax) {
+      //        _CaptionSliderIn.$GoToPosition((_CaptionSliderIn.$GetPosition_OuterEnd() - _CaptionSliderIn.$GetPosition_OuterBegin()) * Math.abs(newOffset - 1) * .8 + _CaptionSliderIn.$GetPosition_OuterBegin());
+      //    }
+      //}
+    };
+
+    _SelfSlideItem.$GetCaptionSliderIn = function () {
+      return _CaptionSliderIn;
+    };
+
+    _SelfSlideItem.$GetCaptionSliderOut = function () {
+      return _CaptionSliderOut;
+    };
+
+    _SelfSlideItem.$Index = slideIndex;
+
+    $JssorObject$.call(_SelfSlideItem);
+
+    //SlideItem Constructor
+    {
+
+      var thumb = $Jssor$.$FindChild(slideElmt, "thumb", true);
+      if (thumb) {
+        _SelfSlideItem.$Thumb = $Jssor$.$CloneNode(thumb);
+        $Jssor$.$RemoveAttribute(thumb, "id");
+        $Jssor$.$HideElement(thumb);
+      }
+      $Jssor$.$ShowElement(slideElmt);
+
+      _LoadingScreen = $Jssor$.$CloneNode(_LoadingContainer);
+      $Jssor$.$CssZIndex(_LoadingScreen, 1000);
+
+      //cancel click event on <A> element when a drag of slide succeeded
+      $Jssor$.$AddEvent(slideElmt, "click", SlideClickEventHandler);
+
+      ResetCaptionSlider(true);
+
+      _SelfSlideItem.$Image = _ImageItem;
+      _SelfSlideItem.$Link = _LinkItem;
+
+      _SelfSlideItem.$Item = slideElmt;
+
+      _SelfSlideItem.$Wrapper = _Wrapper = slideElmt;
+      $Jssor$.$AppendChild(_Wrapper, _LoadingScreen);
+
+      _SelfSlider.$On(203, ParkEventHandler);
+      _SelfSlider.$On(28, FreezeEventHandler);
+      _SelfSlider.$On(24, SwipeStartEventHandler);
+
+      $JssorDebug$.$Execute(function () {
+        _SequenceNumber = _SlideItemCreatedCount++;
+      });
+
+      $JssorDebug$.$Execute(function () {
+        $Jssor$.$Attribute(_Wrapper, "debug-id", "slide-" + slideIndex);
+      });
+    }
+  }
+  //SlideItem
+
+  //Processor
+  function Processor(slideElmt, slideIndex, slideshowProcessor, captionSliderIn, captionSliderOut) {
+
+    var _SelfProcessor = this;
+
+    var _ProgressBegin = 0;
+    var _SlideshowBegin = 0;
+    var _SlideshowEnd;
+    var _CaptionInBegin;
+    var _IdleBegin;
+    var _IdleEnd;
+    var _ProgressEnd;
+
+    var _IsSlideshowRunning;
+    var _IsRollingBack;
+
+    var _PlayerInstance;
+    var _IsPlayerOnService;
+
+    var slideItem = _SlideItems[slideIndex];
+
+    $JssorAnimator$.call(_SelfProcessor, 0, 0);
+
+    function UpdateLink() {
+
+      $Jssor$.$Empty(_LinkContainer);
+
+      if (_ShowLink && _IsSlideshowRunning && slideItem.$Link) {
+        $Jssor$.$AppendChild(_LinkContainer, slideItem.$Link);
+      }
+
+      $Jssor$.$ShowElement(_LinkContainer, !_IsSlideshowRunning && slideItem.$Image);
+    }
+
+    function ProcessCompleteEventHandler() {
+
+      if (_IsRollingBack) {
+        _IsRollingBack = false;
+        _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_ROLLBACK_END, slideIndex, _IdleEnd, _ProgressBegin, _IdleBegin, _IdleEnd, _ProgressEnd);
+        _SelfProcessor.$GoToPosition(_IdleBegin);
+      }
+
+      _SelfProcessor.$Replay();
+    }
+
+    function PlayerSwitchEventHandler(isOnService) {
+      _IsPlayerOnService = isOnService;
+
+      _SelfProcessor.$Stop();
+      _SelfProcessor.$Replay();
+    }
+
+    _SelfProcessor.$Replay = function () {
+
+      var currentPosition = _SelfProcessor.$GetPosition_Display();
+
+      if (!_IsDragging && !_IsSliding && !_IsPlayerOnService && _CurrentSlideIndex == slideIndex) {
+
+        if (!currentPosition) {
+          if (_SlideshowEnd && !_IsSlideshowRunning) {
+            _IsSlideshowRunning = true;
+
+            _SelfProcessor.$OpenSlideshowPanel(true);
+
+            _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_SLIDESHOW_START, slideIndex, _ProgressBegin, _SlideshowBegin, _SlideshowEnd, _ProgressEnd);
+          }
+
+          UpdateLink();
+        }
+
+        var toPosition;
+        var stateEvent = $JssorSlider$.$EVT_STATE_CHANGE;
+
+        if (currentPosition != _ProgressEnd) {
+          if (currentPosition == _IdleEnd) {
+            toPosition = _ProgressEnd;
+          }
+          else if (currentPosition == _IdleBegin) {
+            toPosition = _IdleEnd;
+          }
+          else if (!currentPosition) {
+            toPosition = _IdleBegin;
+          }
+          else if (currentPosition > _IdleEnd) {
+            _IsRollingBack = true;
+            toPosition = _IdleEnd;
+            stateEvent = $JssorSlider$.$EVT_ROLLBACK_START;
+          }
+          else {
+            //continue from break (by drag or lock)
+            toPosition = _SelfProcessor.$GetPlayToPosition();
+          }
+        }
+
+        _SelfSlider.$TriggerEvent(stateEvent, slideIndex, currentPosition, _ProgressBegin, _IdleBegin, _IdleEnd, _ProgressEnd);
+
+        var allowAutoPlay = _AutoPlay && (!_HoverToPause || _NotOnHover);
+
+        if (currentPosition == _ProgressEnd) {
+          (_IdleEnd != _ProgressEnd && !(_HoverToPause & 12) || allowAutoPlay) && slideItem.$GoForNextSlide();
+        }
+        else if (allowAutoPlay || currentPosition != _IdleEnd) {
+          _SelfProcessor.$PlayToPosition(toPosition, ProcessCompleteEventHandler);
+        }
+      }
+    };
+
+    _SelfProcessor.$AdjustIdleOnPark = function () {
+      if (_IdleEnd == _ProgressEnd && _IdleEnd == _SelfProcessor.$GetPosition_Display())
+        _SelfProcessor.$GoToPosition(_IdleBegin);
+    };
+
+    _SelfProcessor.$Abort = function () {
+      _SlideshowRunner && _SlideshowRunner.$Index == slideIndex && _SlideshowRunner.$Clear();
+
+      var currentPosition = _SelfProcessor.$GetPosition_Display();
+      if (currentPosition < _ProgressEnd) {
+        _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_STATE_CHANGE, slideIndex, -currentPosition - 1, _ProgressBegin, _IdleBegin, _IdleEnd, _ProgressEnd);
+      }
+    };
+
+    _SelfProcessor.$OpenSlideshowPanel = function (open) {
+      if (slideshowProcessor) {
+        $Jssor$.$CssOverflow(_SlideshowPanel, open && slideshowProcessor.$Transition.$Outside ? "" : "hidden");
+      }
+    };
+
+    _SelfProcessor.$OnInnerOffsetChange = function (oldPosition, newPosition) {
+
+      if (_IsSlideshowRunning && newPosition >= _SlideshowEnd) {
+        _IsSlideshowRunning = false;
+        UpdateLink();
+        slideItem.$UnhideContentForSlideshow();
+        _SlideshowRunner.$Clear();
+
+        _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_SLIDESHOW_END, slideIndex, _ProgressBegin, _SlideshowBegin, _SlideshowEnd, _ProgressEnd);
+      }
+
+      _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_PROGRESS_CHANGE, slideIndex, newPosition, _ProgressBegin, _IdleBegin, _IdleEnd, _ProgressEnd);
+    };
+
+    _SelfProcessor.$SetPlayer = function (playerInstance) {
+      if (playerInstance && !_PlayerInstance) {
+        _PlayerInstance = playerInstance;
+
+        playerInstance.$On($JssorPlayer$.$EVT_SWITCH, PlayerSwitchEventHandler);
+      }
+    };
+
+    //Processor Constructor
+    {
+      if (slideshowProcessor) {
+        _SelfProcessor.$Chain(slideshowProcessor);
+      }
+
+      _SlideshowEnd = _SelfProcessor.$GetPosition_OuterEnd();
+      _CaptionInBegin = _SelfProcessor.$GetPosition_OuterEnd();
+      _SelfProcessor.$Chain(captionSliderIn);
+      _IdleBegin = captionSliderIn.$GetPosition_OuterEnd();
+      _IdleEnd = _IdleBegin + ($Jssor$.$ParseFloat($Jssor$.$AttributeEx(slideElmt, "idle")) || _AutoPlayInterval);
+
+      captionSliderOut.$Shift(_IdleEnd);
+      _SelfProcessor.$Combine(captionSliderOut);
+      _ProgressEnd = _SelfProcessor.$GetPosition_OuterEnd();
+    }
+  }
+  //Processor
+  //#endregion
+
+  function SetPosition(elmt, position) {
+    var orientation = _DragOrientation > 0 ? _DragOrientation : _PlayOrientation;
+    var x = _StepLengthX * position * (orientation & 1);
+    var y = _StepLengthY * position * ((orientation >> 1) & 1);
+
+    x = Math.round(x);
+    y = Math.round(y);
+
+    $Jssor$.$CssLeft(elmt, x);
+    $Jssor$.$CssTop(elmt, y);
+  }
+
+  //#region Event handling begin
+
+  function RecordFreezePoint() {
+    _CarouselPlaying_OnFreeze = _IsSliding;
+    _PlayToPosition_OnFreeze = _CarouselPlayer.$GetPlayToPosition();
+    _Position_OnFreeze = _Conveyor.$GetPosition();
+  }
+
+  function Freeze() {
+    RecordFreezePoint();
+
+    if (_IsDragging || !_NotOnHover && (_HoverToPause & 12)) {
+      _CarouselPlayer.$Stop();
+
+      _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_FREEZE);
+    }
+  }
+
+  function Unfreeze(byDrag) {
+
+    if (!_IsDragging && (_NotOnHover || !(_HoverToPause & 12)) && !_CarouselPlayer.$IsPlaying()) {
+
+      var currentPosition = _Conveyor.$GetPosition();
+      var toPosition = Math.ceil(_Position_OnFreeze);
+
+      if (byDrag && Math.abs(_DragOffsetTotal) >= _Options.$MinDragOffsetToSlide) {
+        toPosition = Math.ceil(currentPosition);
+        toPosition += _DragIndexAdjust;
+      }
+
+      if (!(_Loop & 1)) {
+        toPosition = Math.min(_SlideCount - _DisplayPieces, Math.max(toPosition, 0));
+      }
+
+      var t = Math.abs(toPosition - currentPosition);
+      t = 1 - Math.pow(1 - t, 5);
+
+      if (!_LastDragSucceded && _CarouselPlaying_OnFreeze) {
+        _CarouselPlayer.$Continue(_PlayToPosition_OnFreeze);
+      }
+      else if (currentPosition == toPosition) {
+        _CurrentSlideItem.$EnablePlayer();
+        _CurrentSlideItem.$TryActivate();
+      }
+      else {
+
+        _CarouselPlayer.$PlayCarousel(currentPosition, toPosition, t * _SlideDuration);
+      }
+    }
+  }
+
+  function PreventDragSelectionEvent(event) {
+    if (!$Jssor$.$AttributeEx($Jssor$.$EvtSrc(event), "nodrag")) {
+      $Jssor$.$CancelEvent(event);
+    }
+  }
+
+  function OnTouchStart(event) {
+    OnDragStart(event, 1);
+  }
+
+  function OnDragStart(event, touch) {
+    event = $Jssor$.$GetEvent(event);
+    var eventSrc = $Jssor$.$EvtSrc(event);
+
+    if (!_DragOrientationRegistered && !$Jssor$.$AttributeEx(eventSrc, "nodrag") && RegisterDrag() && (!touch || event.touches.length == 1)) {
+      _IsDragging = true;
+      _DragInvalid = false;
+      _LoadingTicket = null;
+
+      $Jssor$.$AddEvent(document, touch ? "touchmove" : "mousemove", OnDragMove);
+
+      _LastTimeMoveByDrag = $Jssor$.$GetNow() - 50;
+
+      _LastDragSucceded = 0;
+      Freeze();
+
+      if (!_CarouselPlaying_OnFreeze)
+        _DragOrientation = 0;
+
+      if (touch) {
+        var touchPoint = event.touches[0];
+        _DragStartMouseX = touchPoint.clientX;
+        _DragStartMouseY = touchPoint.clientY;
+      }
+      else {
+        var mousePoint = $Jssor$.$MousePosition(event);
+
+        _DragStartMouseX = mousePoint.x;
+        _DragStartMouseY = mousePoint.y;
+      }
+
+      _DragOffsetTotal = 0;
+      _DragOffsetLastTime = 0;
+      _DragIndexAdjust = 0;
+
+      //Trigger EVT_DRAGSTART
+      _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_DRAG_START, GetRealIndex(_Position_OnFreeze), _Position_OnFreeze, event);
+    }
+  }
+
+  function OnDragMove(event) {
+    if (_IsDragging) {
+      event = $Jssor$.$GetEvent(event);
+
+      var actionPoint;
+
+      if (event.type != "mousemove") {
+        var touch = event.touches[0];
+        actionPoint = { x: touch.clientX, y: touch.clientY };
+      }
+      else {
+        actionPoint = $Jssor$.$MousePosition(event);
+      }
+
+      if (actionPoint) {
+        var distanceX = actionPoint.x - _DragStartMouseX;
+        var distanceY = actionPoint.y - _DragStartMouseY;
+
+
+        if (Math.floor(_Position_OnFreeze) != _Position_OnFreeze)
+          _DragOrientation = _DragOrientation || (_PlayOrientation & _DragOrientationRegistered);
+
+        if ((distanceX || distanceY) && !_DragOrientation) {
+          if (_DragOrientationRegistered == 3) {
+            if (Math.abs(distanceY) > Math.abs(distanceX)) {
+              _DragOrientation = 2;
+            }
+            else
+              _DragOrientation = 1;
+          }
+          else {
+            _DragOrientation = _DragOrientationRegistered;
+          }
+
+          if (_IsTouchDevice && _DragOrientation == 1 && Math.abs(distanceY) - Math.abs(distanceX) > 3) {
+            _DragInvalid = true;
+          }
+        }
+
+        if (_DragOrientation) {
+          var distance = distanceY;
+          var stepLength = _StepLengthY;
+
+          if (_DragOrientation == 1) {
+            distance = distanceX;
+            stepLength = _StepLengthX;
+          }
+
+          if (!(_Loop & 1)) {
+            if (distance > 0) {
+              var normalDistance = stepLength * _CurrentSlideIndex;
+              var sqrtDistance = distance - normalDistance;
+              if (sqrtDistance > 0) {
+                distance = normalDistance + Math.sqrt(sqrtDistance) * 5;
+              }
+            }
+
+            if (distance < 0) {
+              var normalDistance = stepLength * (_SlideCount - _DisplayPieces - _CurrentSlideIndex);
+              var sqrtDistance = -distance - normalDistance;
+
+              if (sqrtDistance > 0) {
+                distance = -normalDistance - Math.sqrt(sqrtDistance) * 5;
+              }
+            }
+          }
+
+          if (_DragOffsetTotal - _DragOffsetLastTime < -2) {
+            _DragIndexAdjust = 0;
+          }
+          else if (_DragOffsetTotal - _DragOffsetLastTime > 2) {
+            _DragIndexAdjust = -1;
+          }
+
+          _DragOffsetLastTime = _DragOffsetTotal;
+          _DragOffsetTotal = distance;
+          _PositionToGoByDrag = _Position_OnFreeze - _DragOffsetTotal / stepLength / (_ScaleRatio || 1);
+
+          if (_DragOffsetTotal && _DragOrientation && !_DragInvalid) {
+            $Jssor$.$CancelEvent(event);
+            if (!_IsSliding) {
+              _CarouselPlayer.$StandBy(_PositionToGoByDrag);
+            }
+            else
+              _CarouselPlayer.$SetStandByPosition(_PositionToGoByDrag);
+          }
+        }
+      }
+    }
+  }
+
+  function OnDragEnd() {
+    UnregisterDrag();
+
+    if (_IsDragging) {
+
+      _IsDragging = false;
+
+      _LastTimeMoveByDrag = $Jssor$.$GetNow();
+
+      $Jssor$.$RemoveEvent(document, "mousemove", OnDragMove);
+      $Jssor$.$RemoveEvent(document, "touchmove", OnDragMove);
+
+      _LastDragSucceded = _DragOffsetTotal;
+
+      _CarouselPlayer.$Stop();
+
+      var currentPosition = _Conveyor.$GetPosition();
+
+      //Trigger EVT_DRAG_END
+      _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_DRAG_END, GetRealIndex(currentPosition), currentPosition, GetRealIndex(_Position_OnFreeze), _Position_OnFreeze);
+
+      (_HoverToPause & 12) && RecordFreezePoint();
+
+      Unfreeze(true);
+    }
+  }
+
+  function SlidesClickEventHandler(event) {
+    if (_LastDragSucceded) {
+      $Jssor$.$StopEvent(event);
+
+      var checkElement = $Jssor$.$EvtSrc(event);
+      while (checkElement && _SlidesContainer !== checkElement) {
+        if (checkElement.tagName == "A") {
+          $Jssor$.$CancelEvent(event);
+        }
+        try {
+          checkElement = checkElement.parentNode;
+        } catch (e) {
+          // Firefox sometimes fires events for XUL elements, which throws
+          // a "permission denied" error. so this is not a child.
+          break;
+        }
+      }
+    }
+  }
+  //#endregion
+
+  function SetCurrentSlideIndex(index) {
+    _PrevSlideItem = _SlideItems[_CurrentSlideIndex];
+    _PreviousSlideIndex = _CurrentSlideIndex;
+    _CurrentSlideIndex = GetRealIndex(index);
+    _CurrentSlideItem = _SlideItems[_CurrentSlideIndex];
+    ResetNavigator(index);
+    return _CurrentSlideIndex;
+  }
+
+  function OnPark(slideIndex, prevIndex) {
+    _DragOrientation = 0;
+
+    SetCurrentSlideIndex(slideIndex);
+
+    //Trigger EVT_PARK
+    _SelfSlider.$TriggerEvent($JssorSlider$.$EVT_PARK, GetRealIndex(slideIndex), prevIndex);
+  }
+
+  function ResetNavigator(index, temp) {
+    _TempSlideIndex = index;
+    $Jssor$.$Each(_Navigators, function (navigator) {
+      navigator.$SetCurrentIndex(GetRealIndex(index), index, temp);
+    });
+  }
+
+  function RegisterDrag() {
+    var dragRegistry = $JssorSlider$.$DragRegistry || 0;
+    var dragOrientation = _DragEnabled;
+    if (_IsTouchDevice)
+      (dragOrientation & 1) && (dragOrientation &= 1);
+    $JssorSlider$.$DragRegistry |= dragOrientation;
+
+    return (_DragOrientationRegistered = dragOrientation & ~dragRegistry);
+  }
+
+  function UnregisterDrag() {
+    if (_DragOrientationRegistered) {
+      $JssorSlider$.$DragRegistry &= ~_DragEnabled;
+      _DragOrientationRegistered = 0;
+    }
+  }
+
+  function CreatePanel() {
+    var div = $Jssor$.$CreateDiv();
+
+    $Jssor$.$SetStyles(div, _StyleDef);
+    $Jssor$.$CssPosition(div, "absolute");
+
+    return div;
+  }
+
+  function GetRealIndex(index) {
+    return (index % _SlideCount + _SlideCount) % _SlideCount;
+  }
+
+  function IsCurrentSlideIndex(index) {
+    return GetRealIndex(index) == _CurrentSlideIndex;
+  }
+
+  function IsPreviousSlideIndex(index) {
+    return GetRealIndex(index) == _PreviousSlideIndex;
+  }
+
+  //Navigation Request Handler
+  function NavigationClickHandler(index, relative) {
+    if (relative) {
+      if (!_Loop) {
+        //Stop at threshold
+        index = Math.min(Math.max(index + _TempSlideIndex, 0), _SlideCount - _DisplayPieces);
+        relative = false;
+      }
+      else if (_Loop & 2) {
+        //Rewind
+        index = GetRealIndex(index + _TempSlideIndex);
+        relative = false;
+      }
+    }
+    PlayTo(index, _Options.$SlideDuration, relative);
+  }
+
+  function ShowNavigators() {
+    $Jssor$.$Each(_Navigators, function (navigator) {
+      navigator.$Show(navigator.$Options.$ChanceToShow <= _NotOnHover);
+    });
+  }
+
+  function MainContainerMouseLeaveEventHandler() {
+    if (!_NotOnHover) {
+
+      //$JssorDebug$.$Log("mouseleave");
+
+      _NotOnHover = 1;
+
+      ShowNavigators();
+
+      if (!_IsDragging) {
+        (_HoverToPause & 12) && Unfreeze();
+        (_HoverToPause & 3) && _SlideItems[_CurrentSlideIndex].$TryActivate();
+      }
+    }
+  }
+
+  function MainContainerMouseEnterEventHandler() {
+
+    if (_NotOnHover) {
+
+      //$JssorDebug$.$Log("mouseenter");
+
+      _NotOnHover = 0;
+
+      ShowNavigators();
+
+      _IsDragging || !(_HoverToPause & 12) || Freeze();
+    }
+  }
+
+  function AdjustSlidesContainerSize() {
+    _StyleDef = { $Width: _SlideWidth, $Height: _SlideHeight, $Top: 0, $Left: 0 };
+
+    $Jssor$.$Each(_SlideElmts, function (slideElmt, i) {
+
+      $Jssor$.$SetStyles(slideElmt, _StyleDef);
+      $Jssor$.$CssPosition(slideElmt, "absolute");
+      $Jssor$.$CssOverflow(slideElmt, "hidden");
+
+      $Jssor$.$HideElement(slideElmt);
+    });
+
+    $Jssor$.$SetStyles(_LoadingContainer, _StyleDef);
+  }
+
+  function PlayToOffset(offset, slideDuration) {
+    PlayTo(offset, slideDuration, true);
+  }
+
+  function PlayTo(slideIndex, slideDuration, relative) {
+    ///	<summary>
+    ///		PlayTo( slideIndex [, slideDuration] ); //Play slider to position 'slideIndex' within a period calculated base on 'slideDuration'.
+    ///	</summary>
+    ///	<param name="slideIndex" type="Number">
+    ///		slide slideIndex or position will be playing to
+    ///	</param>
+    ///	<param name="slideDuration" type="Number" optional="true">
+    ///		base slide duration in milliseconds to calculate the whole duration to complete this play request.
+    ///	    default value is '$SlideDuration' value which is specified when initialize the slider.
+    ///	</param>
+    /// http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx
+    /// http://msdn.microsoft.com/en-us/library/vstudio/hh542720.aspx
+    if (_CarouselEnabled && (!_IsDragging || _Options.$NaviQuitDrag)) {
+      _IsSliding = true;
+      _IsDragging = false;
+      _CarouselPlayer.$Stop();
+
+      {
+        //Slide Duration
+        if (slideDuration == undefined)
+          slideDuration = _SlideDuration;
+
+        var positionDisplay = _Carousel.$GetPosition_Display();
+        var positionTo = slideIndex;
+        if (relative) {
+          positionTo = positionDisplay + slideIndex;
+          if (slideIndex > 0)
+            positionTo = Math.ceil(positionTo);
+          else
+            positionTo = Math.floor(positionTo);
+        }
+
+        if (_Loop & 2) {
+          //Rewind
+          positionTo = GetRealIndex(positionTo);
+        }
+        if (!(_Loop & 1)) {
+          //Stop at threshold
+          positionTo = Math.max(0, Math.min(positionTo, _SlideCount - _DisplayPieces));
+        }
+
+        var positionOffset = (positionTo - positionDisplay) % _SlideCount;
+        positionTo = positionDisplay + positionOffset;
+
+        var duration = positionDisplay == positionTo ? 0 : slideDuration * Math.abs(positionOffset);
+        duration = Math.min(duration, slideDuration * _DisplayPieces * 1.5);
+
+        _CarouselPlayer.$PlayCarousel(positionDisplay, positionTo, duration || 1);
+      }
+    }
+  }
+
+  //private functions
+
+  //member functions
+
+  _SelfSlider.$PlayTo = PlayTo;
+
+  _SelfSlider.$GoTo = function (slideIndex) {
+    ///	<summary>
+    ///		instance.$GoTo( slideIndex );   //Go to the specifed slide immediately with no play.
+    ///	</summary>
+    PlayTo(slideIndex, 1);
+  };
+
+  _SelfSlider.$Next = function () {
+    ///	<summary>
+    ///		instance.$Next();   //Play the slider to next slide.
+    ///	</summary>
+    PlayToOffset(1);
+  };
+
+  _SelfSlider.$Prev = function () {
+    ///	<summary>
+    ///		instance.$Prev();   //Play the slider to previous slide.
+    ///	</summary>
+    PlayToOffset(-1);
+  };
+
+  _SelfSlider.$Pause = function () {
+    ///	<summary>
+    ///		instance.$Pause();   //Pause the slider, prevent it from auto playing.
+    ///	</summary>
+    _AutoPlay = false;
+  };
+
+  _SelfSlider.$Play = function () {
+    ///	<summary>
+    ///		instance.$Play();   //Start auto play if the slider is currently paused.
+    ///	</summary>
+    if (!_AutoPlay) {
+      _AutoPlay = true;
+      _SlideItems[_CurrentSlideIndex] && _SlideItems[_CurrentSlideIndex].$TryActivate();
+    }
+  };
+
+  _SelfSlider.$SetSlideshowTransitions = function (transitions) {
+    ///	<summary>
+    ///		instance.$SetSlideshowTransitions( transitions );   //Reset slideshow transitions for the slider.
+    ///	</summary>
+    $JssorDebug$.$Execute(function () {
+      if (!transitions || !transitions.length) {
+        $JssorDebug$.$Error("Can not set slideshow transitions, no transitions specified.");
+      }
+    });
+
+    //$Jssor$.$TranslateTransitions(transitions);    //for old transition compatibility
+    _Options.$SlideshowOptions.$Transitions = transitions;
+  };
+
+  _SelfSlider.$SetCaptionTransitions = function (transitions) {
+    ///	<summary>
+    ///		instance.$SetCaptionTransitions( transitions );   //Reset caption transitions for the slider.
+    ///	</summary>
+    $JssorDebug$.$Execute(function () {
+      if (!transitions || !transitions.length) {
+        $JssorDebug$.$Error("Can not set caption transitions, no transitions specified");
+      }
+    });
+
+    //$Jssor$.$TranslateTransitions(transitions);    //for old transition compatibility
+    _CaptionSliderOptions.$CaptionTransitions = transitions;
+    _CaptionSliderOptions.$Version = $Jssor$.$GetNow();
+  };
+
+  _SelfSlider.$SlidesCount = function () {
+    ///	<summary>
+    ///		instance.$SlidesCount();   //Retrieve slides count of the slider.
+    ///	</summary>
+    return _SlideElmts.length;
+  };
+
+  _SelfSlider.$CurrentIndex = function () {
+    ///	<summary>
+    ///		instance.$CurrentIndex();   //Retrieve current slide index of the slider.
+    ///	</summary>
+    return _CurrentSlideIndex;
+  };
+
+  _SelfSlider.$IsAutoPlaying = function () {
+    ///	<summary>
+    ///		instance.$IsAutoPlaying();   //Retrieve auto play status of the slider.
+    ///	</summary>
+    return _AutoPlay;
+  };
+
+  _SelfSlider.$IsDragging = function () {
+    ///	<summary>
+    ///		instance.$IsDragging();   //Retrieve drag status of the slider.
+    ///	</summary>
+    return _IsDragging;
+  };
+
+  _SelfSlider.$IsSliding = function () {
+    ///	<summary>
+    ///		instance.$IsSliding();   //Retrieve right<-->left sliding status of the slider.
+    ///	</summary>
+    return _IsSliding;
+  };
+
+  _SelfSlider.$IsMouseOver = function () {
+    ///	<summary>
+    ///		instance.$IsMouseOver();   //Retrieve mouse over status of the slider.
+    ///	</summary>
+    return !_NotOnHover;
+  };
+
+  _SelfSlider.$LastDragSucceded = function () {
+    ///	<summary>
+    ///		instance.$IsLastDragSucceded();   //Retrieve last drag succeded status, returns 0 if failed, returns drag offset if succeded
+    ///	</summary>
+    return _LastDragSucceded;
+  };
+
+  function OriginalWidth() {
+    ///	<summary>
+    ///		instance.$OriginalWidth();   //Retrieve original width of the slider.
+    ///	</summary>
+    return $Jssor$.$CssWidth(_ScaleWrapper || elmt);
+  }
+
+  function OriginalHeight() {
+    ///	<summary>
+    ///		instance.$OriginalHeight();   //Retrieve original height of the slider.
+    ///	</summary>
+    return $Jssor$.$CssHeight(_ScaleWrapper || elmt);
+  }
+
+  _SelfSlider.$OriginalWidth = _SelfSlider.$GetOriginalWidth = OriginalWidth;
+
+  _SelfSlider.$OriginalHeight = _SelfSlider.$GetOriginalHeight = OriginalHeight;
+
+  function Scale(dimension, isHeight) {
+    ///	<summary>
+    ///		instance.$ScaleWidth();   //Retrieve scaled dimension the slider currently displays.
+    ///		instance.$ScaleWidth( dimension );   //Scale the slider to new width and keep aspect ratio.
+    ///	</summary>
+
+    if (dimension == undefined)
+      return $Jssor$.$CssWidth(elmt);
+
+    if (!_ScaleWrapper) {
+      $JssorDebug$.$Execute(function () {
+        var originalWidthStr = $Jssor$.$Css(elmt, "width");
+        var originalHeightStr = $Jssor$.$Css(elmt, "height");
+        var originalWidth = $Jssor$.$CssP(elmt, "width");
+        var originalHeight = $Jssor$.$CssP(elmt, "height");
+
+        if (!originalWidthStr || originalWidthStr.indexOf("px") == -1) {
+          $JssorDebug$.$Fail("Cannot scale jssor slider, 'width' of 'outer container' not specified. Please specify 'width' in pixel. e.g. 'width: 600px;'");
+        }
+
+        if (!originalHeightStr || originalHeightStr.indexOf("px") == -1) {
+          $JssorDebug$.$Fail("Cannot scale jssor slider, 'height' of 'outer container' not specified. Please specify 'height' in pixel. e.g. 'height: 300px;'");
+        }
+
+        if (originalWidthStr.indexOf('%') != -1) {
+          $JssorDebug$.$Fail("Cannot scale jssor slider, 'width' of 'outer container' not valid. Please specify 'width' in pixel. e.g. 'width: 600px;'");
+        }
+
+        if (originalHeightStr.indexOf('%') != -1) {
+          $JssorDebug$.$Fail("Cannot scale jssor slider, 'height' of 'outer container' not valid. Please specify 'height' in pixel. e.g. 'height: 300px;'");
+        }
+
+        if (!originalWidth) {
+          $JssorDebug$.$Fail("Cannot scale jssor slider, 'width' of 'outer container' not valid. 'width' of 'outer container' should be positive number. e.g. 'width: 600px;'");
+        }
+
+        if (!originalHeight) {
+          $JssorDebug$.$Fail("Cannot scale jssor slider, 'height' of 'outer container' not valid. 'height' of 'outer container' should be positive number. e.g. 'height: 300px;'");
+        }
+      });
+
+      var innerWrapper = $Jssor$.$CreateDiv(document);
+      $Jssor$.$ClassName(innerWrapper, $Jssor$.$ClassName(elmt));
+      $Jssor$.$CssCssText(innerWrapper, $Jssor$.$CssCssText(elmt));
+      $Jssor$.$CssDisplay(innerWrapper, "block");
+
+      $Jssor$.$CssPosition(innerWrapper, "relative");
+      $Jssor$.$CssTop(innerWrapper, 0);
+      $Jssor$.$CssLeft(innerWrapper, 0);
+      $Jssor$.$CssOverflow(innerWrapper, "visible");
+
+      _ScaleWrapper = $Jssor$.$CreateDiv(document);
+
+      $Jssor$.$CssPosition(_ScaleWrapper, "absolute");
+      $Jssor$.$CssTop(_ScaleWrapper, 0);
+      $Jssor$.$CssLeft(_ScaleWrapper, 0);
+      $Jssor$.$CssWidth(_ScaleWrapper, $Jssor$.$CssWidth(elmt));
+      $Jssor$.$CssHeight(_ScaleWrapper, $Jssor$.$CssHeight(elmt));
+      $Jssor$.$SetStyleTransformOrigin(_ScaleWrapper, "0 0");
+
+      $Jssor$.$AppendChild(_ScaleWrapper, innerWrapper);
+
+      var children = $Jssor$.$Children(elmt);
+      $Jssor$.$AppendChild(elmt, _ScaleWrapper);
+
+      $Jssor$.$Css(elmt, "backgroundImage", "");
+
+      //var noMoveElmts = {
+      //    "navigator": _BulletNavigatorOptions && _BulletNavigatorOptions.$Scale == false,
+      //    "arrowleft": _ArrowNavigatorOptions && _ArrowNavigatorOptions.$Scale == false,
+      //    "arrowright": _ArrowNavigatorOptions && _ArrowNavigatorOptions.$Scale == false,
+      //    "thumbnavigator": _ThumbnailNavigatorOptions && _ThumbnailNavigatorOptions.$Scale == false,
+      //    "thumbwrapper": _ThumbnailNavigatorOptions && _ThumbnailNavigatorOptions.$Scale == false
+      //};
+
+      $Jssor$.$Each(children, function (child) {
+        $Jssor$.$AppendChild($Jssor$.$AttributeEx(child, "noscale") ? elmt : innerWrapper, child);
+        //$Jssor$.$AppendChild(noMoveElmts[$Jssor$.$AttributeEx(child, "u")] ? elmt : innerWrapper, child);
+      });
+    }
+
+    $JssorDebug$.$Execute(function () {
+      if (!dimension || dimension < 0) {
+        $JssorDebug$.$Fail("'$ScaleWidth' error, 'dimension' should be positive value.");
+      }
+    });
+
+    $JssorDebug$.$Execute(function () {
+      if (!_InitialScrollWidth) {
+        _InitialScrollWidth = _SelfSlider.$Elmt.scrollWidth;
+      }
+    });
+
+    _ScaleRatio = dimension / (isHeight ? $Jssor$.$CssHeight : $Jssor$.$CssWidth)(_ScaleWrapper);
+    $Jssor$.$CssScale(_ScaleWrapper, _ScaleRatio);
+
+    var scaleWidth = isHeight ? (_ScaleRatio * OriginalWidth()) : dimension;
+    var scaleHeight = isHeight ? dimension : (_ScaleRatio * OriginalHeight());
+
+    $Jssor$.$CssWidth(elmt, scaleWidth);
+    $Jssor$.$CssHeight(elmt, scaleHeight);
+
+    $Jssor$.$Each(_Navigators, function (navigator) {
+      navigator.$Relocate(scaleWidth, scaleHeight);
+    });
+  }
+
+  _SelfSlider.$ScaleHeight = _SelfSlider.$GetScaleHeight = function (height) {
+    ///	<summary>
+    ///		instance.$ScaleHeight();   //Retrieve scaled height the slider currently displays.
+    ///		instance.$ScaleHeight( dimension );   //Scale the slider to new height and keep aspect ratio.
+    ///	</summary>
+
+    if (height == undefined)
+      return $Jssor$.$CssHeight(elmt);
+
+    Scale(height, true);
+  };
+
+  _SelfSlider.$ScaleWidth = _SelfSlider.$SetScaleWidth = _SelfSlider.$GetScaleWidth = Scale;
+
+  _SelfSlider.$GetVirtualIndex = function (index) {
+    var parkingIndex = Math.ceil(GetRealIndex(_ParkingPosition / _StepLength));
+    var displayIndex = GetRealIndex(index - _CurrentSlideIndex + parkingIndex);
+
+    if (displayIndex > _DisplayPieces) {
+      if (index - _CurrentSlideIndex > _SlideCount / 2)
+        index -= _SlideCount;
+      else if (index - _CurrentSlideIndex <= -_SlideCount / 2)
+        index += _SlideCount;
+    }
+    else {
+      index = _CurrentSlideIndex + displayIndex - parkingIndex;
+    }
+
+    return index;
+  };
+
+  //member functions
+
+  $JssorObject$.call(_SelfSlider);
+
+  $JssorDebug$.$Execute(function () {
+    var outerContainerElmt = $Jssor$.$GetElement(elmt);
+    if (!outerContainerElmt)
+      $JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
+  });
+
+  //initialize member variables
+  _SelfSlider.$Elmt = elmt = $Jssor$.$GetElement(elmt);
+  //initialize member variables
+
+  var _InitialScrollWidth;    //for debug only
+  var _CaptionSliderCount = 1;    //for debug only
+
+  var _Options = $Jssor$.$Extend({
+    $FillMode: 0,                   //[Optional] 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, actual size for small image, default value is 0
+    $LazyLoading: 1,                //[Optional] 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 0, 1, 2 or 3) indicates that how far of nearby slides should be loaded immediately as well, default value is 1.
+    $StartIndex: 0,                 //[Optional] Index of slide to display when initialize, default value is 0
+    $AutoPlay: false,               //[Optional] Whether to auto play, default value is false
+    $Loop: 1,                       //[Optional] Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
+    $HWA: true,                     //[Optional] Enable hardware acceleration or not, default value is true
+    $NaviQuitDrag: true,
+    $AutoPlaySteps: 1,              //[Optional] Steps to go of every play (this options applys only when slideshow disabled), default value is 1
+    $AutoPlayInterval: 3000,        //[Optional] Interval to play next slide since the previous stopped if a slideshow is auto playing, default value is 3000
+    $PauseOnHover: 1,               //[Optional] 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
+
+    $SlideDuration: 500,            //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 400
+    $SlideEasing: $JssorEasing$.$EaseOutQuad,   //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad
+    $MinDragOffsetToSlide: 20,      //[Optional] Minimum drag offset that trigger slide, default value is 20
+    $SlideSpacing: 0, 				//[Optional] Space between each slide in pixels, default value is 0
+    $DisplayPieces: 1,              //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), default value is 1
+    $ParkingPosition: 0,            //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
+    $UISearchMode: 1,               //[Optional] The way (0 parellel, 1 recursive, default value is recursive) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc.
+    $PlayOrientation: 1,            //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
+    $DragOrientation: 1             //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 both, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
+
+  }, options);
+
+  //going to use $Idle instead of $AutoPlayInterval
+  if (_Options.$Idle != undefined)
+    _Options.$AutoPlayInterval = _Options.$Idle;
+
+  //going to use $Cols instead of $DisplayPieces
+  if (_Options.$Cols != undefined)
+    _Options.$DisplayPieces = _Options.$Cols;
+
+  //Sodo statement for development time intellisence only
+  $JssorDebug$.$Execute(function () {
+    _Options = $Jssor$.$Extend({
+        $ArrowKeyNavigation: undefined,
+        $SlideWidth: undefined,
+        $SlideHeight: undefined,
+        $SlideshowOptions: undefined,
+        $CaptionSliderOptions: undefined,
+        $BulletNavigatorOptions: undefined,
+        $ArrowNavigatorOptions: undefined,
+        $ThumbnailNavigatorOptions: undefined
+      },
+      _Options);
+  });
+
+  var _PlayOrientation = _Options.$PlayOrientation & 3;
+  var _PlayReverse = (_Options.$PlayOrientation & 4) / -4 || 1;
+
+  var _SlideshowOptions = _Options.$SlideshowOptions;
+  var _CaptionSliderOptions = $Jssor$.$Extend({ $Class: $JssorCaptionSliderBase$, $PlayInMode: 1, $PlayOutMode: 1 }, _Options.$CaptionSliderOptions);
+  //$Jssor$.$TranslateTransitions(_CaptionSliderOptions.$CaptionTransitions); //for old transition compatibility
+  var _BulletNavigatorOptions = _Options.$BulletNavigatorOptions;
+  var _ArrowNavigatorOptions = _Options.$ArrowNavigatorOptions;
+  var _ThumbnailNavigatorOptions = _Options.$ThumbnailNavigatorOptions;
+
+  $JssorDebug$.$Execute(function () {
+    if (_SlideshowOptions && !_SlideshowOptions.$Class) {
+      $JssorDebug$.$Fail("Option $SlideshowOptions error, class not specified.");
+    }
+  });
+
+  $JssorDebug$.$Execute(function () {
+    if (_Options.$CaptionSliderOptions && !_Options.$CaptionSliderOptions.$Class) {
+      $JssorDebug$.$Fail("Option $CaptionSliderOptions error, class not specified.");
+    }
+  });
+
+  $JssorDebug$.$Execute(function () {
+    if (_BulletNavigatorOptions && !_BulletNavigatorOptions.$Class) {
+      $JssorDebug$.$Fail("Option $BulletNavigatorOptions error, class not specified.");
+    }
+  });
+
+  $JssorDebug$.$Execute(function () {
+    if (_ArrowNavigatorOptions && !_ArrowNavigatorOptions.$Class) {
+      $JssorDebug$.$Fail("Option $ArrowNavigatorOptions error, class not specified.");
+    }
+  });
+
+  $JssorDebug$.$Execute(function () {
+    if (_ThumbnailNavigatorOptions && !_ThumbnailNavigatorOptions.$Class) {
+      $JssorDebug$.$Fail("Option $ThumbnailNavigatorOptions error, class not specified.");
+    }
+  });
+
+  var _UISearchNoDeep = !_Options.$UISearchMode;
+  var _ScaleWrapper;
+  var _SlidesContainer = $Jssor$.$FindChild(elmt, "slides", _UISearchNoDeep);
+  var _LoadingContainer = $Jssor$.$FindChild(elmt, "loading", _UISearchNoDeep) || $Jssor$.$CreateDiv(document);
+
+  var _BulletNavigatorContainer = $Jssor$.$FindChild(elmt, "navigator", _UISearchNoDeep);
+
+  var _ArrowLeft = $Jssor$.$FindChild(elmt, "arrowleft", _UISearchNoDeep);
+  var _ArrowRight = $Jssor$.$FindChild(elmt, "arrowright", _UISearchNoDeep);
+
+  var _ThumbnailNavigatorContainer = $Jssor$.$FindChild(elmt, "thumbnavigator", _UISearchNoDeep);
+
+  $JssorDebug$.$Execute(function () {
+    //if (_BulletNavigatorOptions && !_BulletNavigatorContainer) {
+    //    throw new Error("$BulletNavigatorOptions specified but bullet navigator container (<div u=\"navigator\" ...) not defined.");
+    //}
+    if (_BulletNavigatorContainer && !_BulletNavigatorOptions) {
+      throw new Error("Bullet navigator container defined but $BulletNavigatorOptions not specified.");
+    }
+
+    //if (_ArrowNavigatorOptions) {
+    //    if (!_ArrowLeft) {
+    //        throw new Error("$ArrowNavigatorOptions specified, but arrowleft (<span u=\"arrowleft\" ...) not defined.");
+    //    }
+
+    //    if (!_ArrowRight) {
+    //        throw new Error("$ArrowNavigatorOptions specified, but arrowright (<span u=\"arrowright\" ...) not defined.");
+    //    }
+    //}
+
+    if ((_ArrowLeft || _ArrowRight) && !_ArrowNavigatorOptions) {
+      throw new Error("arrowleft or arrowright defined, but $ArrowNavigatorOptions not specified.");
+    }
+
+    //if (_ThumbnailNavigatorOptions && !_ThumbnailNavigatorContainer) {
+    //    throw new Error("$ThumbnailNavigatorOptions specified, but thumbnail navigator container (<div u=\"thumbnavigator\" ...) not defined.");
+    //}
+
+    if (_ThumbnailNavigatorContainer && !_ThumbnailNavigatorOptions) {
+      throw new Error("Thumbnail navigator container defined, but $ThumbnailNavigatorOptions not specified.");
+    }
+  });
+
+  var _SlidesContainerWidth = $Jssor$.$CssWidth(_SlidesContainer);
+  var _SlidesContainerHeight = $Jssor$.$CssHeight(_SlidesContainer);
+
+  $JssorDebug$.$Execute(function () {
+    if (isNaN(_SlidesContainerWidth))
+      $JssorDebug$.$Fail("Width of slides container wrong specification, it should be specified in pixel (like style='width: 600px;').");
+
+    if (_SlidesContainerWidth == undefined)
+      $JssorDebug$.$Fail("Width of slides container not specified, it should be specified in pixel (like style='width: 600px;').");
+
+    if (isNaN(_SlidesContainerHeight))
+      $JssorDebug$.$Fail("Height of slides container wrong specification, it should be specified in pixel (like style='height: 300px;').");
+
+    if (_SlidesContainerHeight == undefined)
+      $JssorDebug$.$Fail("Height of slides container not specified, it should be specified in pixel (like style='height: 300px;').");
+
+    var slidesContainerOverflow = $Jssor$.$CssOverflow(_SlidesContainer);
+    var slidesContainerOverflowX = $Jssor$.$Css(_SlidesContainer, "overflowX");
+    var slidesContainerOverflowY = $Jssor$.$Css(_SlidesContainer, "overflowY");
+    if (slidesContainerOverflow != "hidden" && (slidesContainerOverflowX != "hidden" || slidesContainerOverflowY != "hidden"))
+      $JssorDebug$.$Fail("Overflow of slides container wrong specification, it should be specified as 'hidden' (style='overflow:hidden;').");
+  });
+
+  $JssorDebug$.$Execute(function () {
+    if (!$Jssor$.$IsNumeric(_Options.$DisplayPieces))
+      $JssorDebug$.$Fail("Option $DisplayPieces error, it should be a numeric value and greater than or equal to 1.");
+
+    if (_Options.$DisplayPieces < 1)
+      $JssorDebug$.$Fail("Option $DisplayPieces error, it should be greater than or equal to 1.");
+
+    if (_Options.$DisplayPieces > 1 && _Options.$DragOrientation && _Options.$DragOrientation != _PlayOrientation)
+      $JssorDebug$.$Fail("Option $DragOrientation error, it should be 0 or the same of $PlayOrientation when $DisplayPieces is greater than 1.");
+
+    if (!$Jssor$.$IsNumeric(_Options.$ParkingPosition))
+      $JssorDebug$.$Fail("Option $ParkingPosition error, it should be a numeric value.");
+
+    if (_Options.$ParkingPosition && _Options.$DragOrientation && _Options.$DragOrientation != _PlayOrientation)
+      $JssorDebug$.$Fail("Option $DragOrientation error, it should be 0 or the same of $PlayOrientation when $ParkingPosition is not equal to 0.");
+  });
+
+  var _StyleDef;
+
+  var _SlideElmts = [];
+
+  {
+    var slideElmts = $Jssor$.$Children(_SlidesContainer);
+    $Jssor$.$Each(slideElmts, function (slideElmt) {
+      if (slideElmt.tagName == "DIV" && !$Jssor$.$AttributeEx(slideElmt, "u")) {
+        _SlideElmts.push(slideElmt);
+      }
+      else if ($Jssor$.$IsBrowserIe9Earlier()) {
+        $Jssor$.$CssZIndex(slideElmt, ($Jssor$.$CssZIndex(slideElmt) || 0) + 1);
+      }
+    });
+  }
+
+  $JssorDebug$.$Execute(function () {
+    if (_SlideElmts.length < 1) {
+      $JssorDebug$.$Error("Slides html code definition error, there must be at least 1 slide to initialize a slider.");
+    }
+  });
+
+  var _SlideItemCreatedCount = 0; //for debug only
+  var _SlideItemReleasedCount = 0;    //for debug only
+
+  var _PreviousSlideIndex;
+  var _CurrentSlideIndex = -1;
+  var _TempSlideIndex;
+  var _PrevSlideItem;
+  var _CurrentSlideItem;
+  var _SlideCount = _SlideElmts.length;
+
+  var _SlideWidth = _Options.$SlideWidth || _SlidesContainerWidth;
+  var _SlideHeight = _Options.$SlideHeight || _SlidesContainerHeight;
+
+  var _SlideSpacing = _Options.$SlideSpacing;
+  var _StepLengthX = _SlideWidth + _SlideSpacing;
+  var _StepLengthY = _SlideHeight + _SlideSpacing;
+  var _StepLength = (_PlayOrientation & 1) ? _StepLengthX : _StepLengthY;
+  var _DisplayPieces = Math.min(_Options.$DisplayPieces, _SlideCount);
+
+  var _SlideshowPanel;
+  var _CurrentBoardIndex = 0;
+  var _DragOrientation;
+  var _DragOrientationRegistered;
+  var _DragInvalid;
+
+  var _Navigators = [];
+  var _BulletNavigator;
+  var _ArrowNavigator;
+  var _ThumbnailNavigator;
+
+  var _ShowLink;
+
+  var _Frozen;
+  var _AutoPlay;
+  var _AutoPlaySteps = _Options.$AutoPlaySteps;
+  var _HoverToPause = _Options.$PauseOnHover;
+  var _AutoPlayInterval = _Options.$AutoPlayInterval;
+  var _SlideDuration = _Options.$SlideDuration;
+
+  var _SlideshowRunnerClass;
+  var _TransitionsOrder;
+
+  var _SlideshowEnabled;
+  var _ParkingPosition;
+  var _CarouselEnabled = _DisplayPieces < _SlideCount;
+  var _Loop = _CarouselEnabled ? _Options.$Loop : 0;
+
+  var _DragEnabled;
+  var _LastDragSucceded;
+
+  var _NotOnHover = 1;   //0 Hovering, 1 Not hovering
+
+  //Variable Definition
+  var _IsSliding;
+  var _IsDragging;
+  var _LoadingTicket;
+
+  //The X position of mouse/touch when a drag start
+  var _DragStartMouseX = 0;
+  //The Y position of mouse/touch when a drag start
+  var _DragStartMouseY = 0;
+  var _DragOffsetTotal;
+  var _DragOffsetLastTime;
+  var _DragIndexAdjust;
+
+  var _Carousel;
+  var _Conveyor;
+  var _Slideshow;
+  var _CarouselPlayer;
+  var _SlideContainer = new SlideContainer();
+  var _ScaleRatio;
+
+  //$JssorSlider$ Constructor
+  {
+    _AutoPlay = _Options.$AutoPlay;
+    _SelfSlider.$Options = options;
+
+    AdjustSlidesContainerSize();
+
+    $Jssor$.$Attribute(elmt, "jssor-slider", true);
+
+    $Jssor$.$CssZIndex(_SlidesContainer, $Jssor$.$CssZIndex(_SlidesContainer) || 0);
+    $Jssor$.$CssPosition(_SlidesContainer, "absolute");
+    _SlideshowPanel = $Jssor$.$CloneNode(_SlidesContainer, true);
+    $Jssor$.$InsertBefore(_SlideshowPanel, _SlidesContainer);
+
+    if (_SlideshowOptions) {
+      _ShowLink = _SlideshowOptions.$ShowLink;
+      _SlideshowRunnerClass = _SlideshowOptions.$Class;
+
+      $JssorDebug$.$Execute(function () {
+        if (!_SlideshowOptions.$Transitions || !_SlideshowOptions.$Transitions.length) {
+          $JssorDebug$.$Error("Invalid '$SlideshowOptions', no '$Transitions' specified.");
+        }
+      });
+
+      _SlideshowEnabled = _DisplayPieces == 1 && _SlideCount > 1 && _SlideshowRunnerClass && (!$Jssor$.$IsBrowserIE() || $Jssor$.$BrowserVersion() >= 8);
+    }
+
+    _ParkingPosition = (_SlideshowEnabled || _DisplayPieces >= _SlideCount || !(_Loop & 1)) ? 0 : _Options.$ParkingPosition;
+
+    _DragEnabled = ((_DisplayPieces > 1 || _ParkingPosition) ? _PlayOrientation : -1) & _Options.$DragOrientation;
+
+    //SlideBoard
+    var _SlideboardElmt = _SlidesContainer;
+    var _SlideItems = [];
+
+    var _SlideshowRunner;
+    var _LinkContainer;
+
+    var _Device = $Jssor$.$Device();
+    var _IsTouchDevice = _Device.$Touchable;
+
+    var _LastTimeMoveByDrag;
+    var _Position_OnFreeze;
+    var _CarouselPlaying_OnFreeze;
+    var _PlayToPosition_OnFreeze;
+    var _PositionToGoByDrag;
+
+    //SlideBoard Constructor
+    {
+      if (_Device.$TouchActionAttr) {
+        $Jssor$.$Css(_SlideboardElmt, _Device.$TouchActionAttr, [null, "pan-y", "pan-x", "none"][_DragEnabled] || "");
+      }
+
+      _Slideshow = new Slideshow();
+
+      if (_SlideshowEnabled)
+        _SlideshowRunner = new _SlideshowRunnerClass(_SlideContainer, _SlideWidth, _SlideHeight, _SlideshowOptions, _IsTouchDevice);
+
+      $Jssor$.$AppendChild(_SlideshowPanel, _Slideshow.$Wrapper);
+      $Jssor$.$CssOverflow(_SlidesContainer, "hidden");
+
+      //link container
+      {
+        _LinkContainer = CreatePanel();
+        $Jssor$.$Css(_LinkContainer, "backgroundColor", "#000");
+        $Jssor$.$CssOpacity(_LinkContainer, 0);
+        $Jssor$.$InsertBefore(_LinkContainer, _SlideboardElmt.firstChild, _SlideboardElmt);
+      }
+
+      for (var i = 0; i < _SlideElmts.length; i++) {
+        var slideElmt = _SlideElmts[i];
+        var slideItem = new SlideItem(slideElmt, i);
+        _SlideItems.push(slideItem);
+      }
+
+      $Jssor$.$HideElement(_LoadingContainer);
+
+      $JssorDebug$.$Execute(function () {
+        $Jssor$.$Attribute(_LoadingContainer, "debug-id", "loading-container");
+      });
+
+      _Carousel = new Carousel();
+      _CarouselPlayer = new CarouselPlayer(_Carousel, _Slideshow);
+
+      $JssorDebug$.$Execute(function () {
+        $Jssor$.$Attribute(_SlideboardElmt, "debug-id", "slide-board");
+      });
+
+      if (_DragEnabled) {
+        $Jssor$.$AddEvent(_SlidesContainer, "mousedown", OnDragStart);
+        $Jssor$.$AddEvent(_SlidesContainer, "touchstart", OnTouchStart);
+        $Jssor$.$AddEvent(_SlidesContainer, "dragstart", PreventDragSelectionEvent);
+        $Jssor$.$AddEvent(_SlidesContainer, "selectstart", PreventDragSelectionEvent);
+        $Jssor$.$AddEvent(document, "mouseup", OnDragEnd);
+        $Jssor$.$AddEvent(document, "touchend", OnDragEnd);
+        $Jssor$.$AddEvent(document, "touchcancel", OnDragEnd);
+        $Jssor$.$AddEvent(window, "blur", OnDragEnd);
+      }
+    }
+    //SlideBoard
+
+    _HoverToPause &= (_IsTouchDevice ? 10 : 5);
+
+    //Bullet Navigator
+    if (_BulletNavigatorContainer && _BulletNavigatorOptions) {
+      _BulletNavigator = new _BulletNavigatorOptions.$Class(_BulletNavigatorContainer, _BulletNavigatorOptions, OriginalWidth(), OriginalHeight());
+      _Navigators.push(_BulletNavigator);
+    }
+
+    //Arrow Navigator
+    if (_ArrowNavigatorOptions && _ArrowLeft && _ArrowRight) {
+      _ArrowNavigatorOptions.$Loop = _Loop;
+      _ArrowNavigatorOptions.$DisplayPieces = _DisplayPieces;
+      _ArrowNavigator = new _ArrowNavigatorOptions.$Class(_ArrowLeft, _ArrowRight, _ArrowNavigatorOptions, OriginalWidth(), OriginalHeight());
+      _Navigators.push(_ArrowNavigator);
+    }
+
+    //Thumbnail Navigator
+    if (_ThumbnailNavigatorContainer && _ThumbnailNavigatorOptions) {
+      _ThumbnailNavigatorOptions.$StartIndex = _Options.$StartIndex;
+      _ThumbnailNavigator = new _ThumbnailNavigatorOptions.$Class(_ThumbnailNavigatorContainer, _ThumbnailNavigatorOptions);
+      _Navigators.push(_ThumbnailNavigator);
+    }
+
+    $Jssor$.$Each(_Navigators, function (navigator) {
+      navigator.$Reset(_SlideCount, _SlideItems, _LoadingContainer);
+      navigator.$On($JssorNavigatorEvents$.$NAVIGATIONREQUEST, NavigationClickHandler);
+    });
+
+    Scale(OriginalWidth());
+
+    $Jssor$.$AddEvent(_SlidesContainer, "click", SlidesClickEventHandler);
+    $Jssor$.$AddEvent(elmt, "mouseout", $Jssor$.$MouseOverOutFilter(MainContainerMouseLeaveEventHandler, elmt));
+    $Jssor$.$AddEvent(elmt, "mouseover", $Jssor$.$MouseOverOutFilter(MainContainerMouseEnterEventHandler, elmt));
+
+    ShowNavigators();
+
+    //Keyboard Navigation
+    if (_Options.$ArrowKeyNavigation) {
+      $Jssor$.$AddEvent(document, "keydown", function (e) {
+        if (e.keyCode == 37/*$JssorKeyCode$.$LEFT*/) {
+          //Arrow Left
+          PlayToOffset(-1);
+        }
+        else if (e.keyCode == 39/*$JssorKeyCode$.$RIGHT*/) {
+          //Arrow Right
+          PlayToOffset(1);
+        }
+      });
+    }
+
+    var startPosition = _Options.$StartIndex;
+    if (!(_Loop & 1)) {
+      startPosition = Math.max(0, Math.min(startPosition, _SlideCount - _DisplayPieces));
+    }
+    _CarouselPlayer.$PlayCarousel(startPosition, startPosition, 0);
+  }
+};
+var $JssorSlideo$ = window.$JssorSlideo$ = $JssorSlider$;
+
+$JssorSlider$.$EVT_CLICK = 21;
+$JssorSlider$.$EVT_DRAG_START = 22;
+$JssorSlider$.$EVT_DRAG_END = 23;
+$JssorSlider$.$EVT_SWIPE_START = 24;
+$JssorSlider$.$EVT_SWIPE_END = 25;
+
+$JssorSlider$.$EVT_LOAD_START = 26;
+$JssorSlider$.$EVT_LOAD_END = 27;
+$JssorSlider$.$EVT_FREEZE = 28;
+
+$JssorSlider$.$EVT_POSITION_CHANGE = 202;
+$JssorSlider$.$EVT_PARK = 203;
+
+$JssorSlider$.$EVT_SLIDESHOW_START = 206;
+$JssorSlider$.$EVT_SLIDESHOW_END = 207;
+
+$JssorSlider$.$EVT_PROGRESS_CHANGE = 208;
+$JssorSlider$.$EVT_STATE_CHANGE = 209;
+$JssorSlider$.$EVT_ROLLBACK_START = 210;
+$JssorSlider$.$EVT_ROLLBACK_END = 211;
+
+//(function ($) {
+//    jQuery.fn.jssorSlider = function (options) {
+//        return this.each(function () {
+//            return $(this).data('jssorSlider') || $(this).data('jssorSlider', new $JssorSlider$(this, options));
+//        });
+//    };
+//})(jQuery);
+
+//window.jQuery && (jQuery.fn.jssorSlider = function (options) {
+//    return this.each(function () {
+//        return jQuery(this).data('jssorSlider') || jQuery(this).data('jssorSlider', new $JssorSlider$(this, options));
+//    });
+//});
+
+//$JssorBulletNavigator$
+var $JssorNavigatorEvents$ = {
+  $NAVIGATIONREQUEST: 1,
+  $INDEXCHANGE: 2,
+  $RESET: 3
+};
+
+var $JssorBulletNavigator$ = window.$JssorBulletNavigator$ = function (elmt, options, containerWidth, containerHeight) {
+  var self = this;
+  $JssorObject$.call(self);
+
+  elmt = $Jssor$.$GetElement(elmt);
+
+  var _Count;
+  var _Length;
+  var _Width;
+  var _Height;
+  var _CurrentIndex;
+  var _CurrentInnerIndex = 0;
+  var _Options;
+  var _Steps;
+  var _Lanes;
+  var _SpacingX;
+  var _SpacingY;
+  var _Orientation;
+  var _ItemPrototype;
+  var _PrototypeWidth;
+  var _PrototypeHeight;
+
+  var _ButtonElements = [];
+  var _Buttons = [];
+
+  function Highlight(index) {
+    if (index != -1)
+      _Buttons[index].$Selected(index == _CurrentInnerIndex);
+  }
+
+  function OnNavigationRequest(index) {
+    self.$TriggerEvent($JssorNavigatorEvents$.$NAVIGATIONREQUEST, index * _Steps);
+  }
+
+  self.$Elmt = elmt;
+  self.$GetCurrentIndex = function () {
+    return _CurrentIndex;
+  };
+
+  self.$SetCurrentIndex = function (index) {
+    if (index != _CurrentIndex) {
+      var lastInnerIndex = _CurrentInnerIndex;
+      var innerIndex = Math.floor(index / _Steps);
+      _CurrentInnerIndex = innerIndex;
+      _CurrentIndex = index;
+
+      Highlight(lastInnerIndex);
+      Highlight(innerIndex);
+
+      //self.$TriggerEvent($JssorNavigatorEvents$.$INDEXCHANGE, index);
+    }
+  };
+
+  self.$Show = function (hide) {
+    $Jssor$.$ShowElement(elmt, hide);
+  };
+
+  var _Located;
+  self.$Relocate = function (containerWidth, containerHeight) {
+    if (!_Located || _Options.$Scale == false) {
+      var containerWidth = $Jssor$.$ParentNode(elmt).clientWidth;
+      var containerHeight = $Jssor$.$ParentNode(elmt).clientHeight;
+
+      if (_Options.$AutoCenter & 1) {
+        $Jssor$.$CssLeft(elmt, (containerWidth - _Width) / 2);
+      }
+      if (_Options.$AutoCenter & 2) {
+        $Jssor$.$CssTop(elmt, (containerHeight - _Height) / 2);
+      }
+
+      _Located = true;
+    }
+  };
+
+  var _Initialized;
+  self.$Reset = function (length) {
+    if (!_Initialized) {
+      _Length = length;
+      _Count = Math.ceil(length / _Steps);
+      _CurrentInnerIndex = 0;
+
+      var itemOffsetX = _PrototypeWidth + _SpacingX;
+      var itemOffsetY = _PrototypeHeight + _SpacingY;
+
+      var maxIndex = Math.ceil(_Count / _Lanes) - 1;
+
+      _Width = _PrototypeWidth + itemOffsetX * (!_Orientation ? maxIndex : _Lanes - 1);
+      _Height = _PrototypeHeight + itemOffsetY * (_Orientation ? maxIndex : _Lanes - 1);
+
+      $Jssor$.$CssWidth(elmt, _Width);
+      $Jssor$.$CssHeight(elmt, _Height);
+
+      for (var buttonIndex = 0; buttonIndex < _Count; buttonIndex++) {
+
+        var numberDiv = $Jssor$.$CreateSpan();
+        $Jssor$.$InnerText(numberDiv, buttonIndex + 1);
+
+        var div = $Jssor$.$BuildElement(_ItemPrototype, "numbertemplate", numberDiv, true);
+        $Jssor$.$CssPosition(div, "absolute");
+
+        var columnIndex = buttonIndex % (maxIndex + 1);
+        $Jssor$.$CssLeft(div, !_Orientation ? itemOffsetX * columnIndex : buttonIndex % _Lanes * itemOffsetX);
+        $Jssor$.$CssTop(div, _Orientation ? itemOffsetY * columnIndex : Math.floor(buttonIndex / (maxIndex + 1)) * itemOffsetY);
+
+        $Jssor$.$AppendChild(elmt, div);
+        _ButtonElements[buttonIndex] = div;
+
+        if (_Options.$ActionMode & 1)
+          $Jssor$.$AddEvent(div, "click", $Jssor$.$CreateCallback(null, OnNavigationRequest, buttonIndex));
+
+        if (_Options.$ActionMode & 2)
+          $Jssor$.$AddEvent(div, "mouseover", $Jssor$.$MouseOverOutFilter($Jssor$.$CreateCallback(null, OnNavigationRequest, buttonIndex), div));
+
+        _Buttons[buttonIndex] = $Jssor$.$Buttonize(div);
+      }
+
+      //self.$TriggerEvent($JssorNavigatorEvents$.$RESET);
+      _Initialized = true;
+    }
+  };
+
+  //JssorBulletNavigator Constructor
+  {
+    self.$Options = _Options = $Jssor$.$Extend({
+      $SpacingX: 0,
+      $SpacingY: 0,
+      $Orientation: 1,
+      $ActionMode: 1
+    }, options);
+
+    //Sodo statement for development time intellisence only
+    $JssorDebug$.$Execute(function () {
+      _Options = $Jssor$.$Extend({
+        $Steps: undefined,
+        $Lanes: undefined
+      }, _Options);
+    });
+
+    _ItemPrototype = $Jssor$.$FindChild(elmt, "prototype");
+
+    $JssorDebug$.$Execute(function () {
+      if (!_ItemPrototype)
+        $JssorDebug$.$Fail("Navigator item prototype not defined.");
+
+      if (isNaN($Jssor$.$CssWidth(_ItemPrototype))) {
+        $JssorDebug$.$Fail("Width of 'navigator item prototype' not specified.");
+      }
+
+      if (isNaN($Jssor$.$CssHeight(_ItemPrototype))) {
+        $JssorDebug$.$Fail("Height of 'navigator item prototype' not specified.");
+      }
+    });
+
+    _PrototypeWidth = $Jssor$.$CssWidth(_ItemPrototype);
+    _PrototypeHeight = $Jssor$.$CssHeight(_ItemPrototype);
+
+    $Jssor$.$RemoveElement(_ItemPrototype, elmt);
+
+    _Steps = _Options.$Steps || 1;
+    _Lanes = _Options.$Lanes || 1;
+    _SpacingX = _Options.$SpacingX;
+    _SpacingY = _Options.$SpacingY;
+    _Orientation = _Options.$Orientation - 1;
+
+    if (_Options.$Scale == false) {
+      $Jssor$.$Attribute(elmt, "noscale", true);
+    }
+  }
+};
+
+var $JssorArrowNavigator$ = window.$JssorArrowNavigator$ = function (arrowLeft, arrowRight, options, containerWidth, containerHeight) {
+  var self = this;
+  $JssorObject$.call(self);
+
+  $JssorDebug$.$Execute(function () {
+
+    if (!arrowLeft)
+      $JssorDebug$.$Fail("Option '$ArrowNavigatorOptions' spepcified, but UI 'arrowleft' not defined. Define 'arrowleft' to enable direct navigation, or remove option '$ArrowNavigatorOptions' to disable direct navigation.");
+
+    if (!arrowRight)
+      $JssorDebug$.$Fail("Option '$ArrowNavigatorOptions' spepcified, but UI 'arrowright' not defined. Define 'arrowright' to enable direct navigation, or remove option '$ArrowNavigatorOptions' to disable direct navigation.");
+
+    if (isNaN($Jssor$.$CssWidth(arrowLeft))) {
+      $JssorDebug$.$Fail("Width of 'arrow left' not specified.");
+    }
+
+    if (isNaN($Jssor$.$CssWidth(arrowRight))) {
+      $JssorDebug$.$Fail("Width of 'arrow right' not specified.");
+    }
+
+    if (isNaN($Jssor$.$CssHeight(arrowLeft))) {
+      $JssorDebug$.$Fail("Height of 'arrow left' not specified.");
+    }
+
+    if (isNaN($Jssor$.$CssHeight(arrowRight))) {
+      $JssorDebug$.$Fail("Height of 'arrow right' not specified.");
+    }
+  });
+
+  var _Hide;
+  var _Length;
+  var _CurrentIndex;
+  var _Options;
+  var _Steps;
+  var _ArrowWidth = $Jssor$.$CssWidth(arrowLeft);
+  var _ArrowHeight = $Jssor$.$CssHeight(arrowLeft);
+
+  function OnNavigationRequest(steps) {
+    self.$TriggerEvent($JssorNavigatorEvents$.$NAVIGATIONREQUEST, steps, true);
+  }
+
+  function ShowArrows(hide) {
+    $Jssor$.$ShowElement(arrowLeft, hide || !options.$Loop && _CurrentIndex == 0);
+    $Jssor$.$ShowElement(arrowRight, hide || !options.$Loop && _CurrentIndex >= _Length - options.$DisplayPieces);
+
+    _Hide = hide;
+  }
+
+  self.$GetCurrentIndex = function () {
+    return _CurrentIndex;
+  };
+
+  self.$SetCurrentIndex = function (index, virtualIndex, temp) {
+    if (temp) {
+      _CurrentIndex = virtualIndex;
+    }
+    else {
+      _CurrentIndex = index;
+
+      ShowArrows(_Hide);
+    }
+    //self.$TriggerEvent($JssorNavigatorEvents$.$INDEXCHANGE, index);
+  };
+
+  self.$Show = ShowArrows;
+
+  var _Located;
+  self.$Relocate = function (conainerWidth, containerHeight) {
+    if (!_Located || _Options.$Scale == false) {
+
+      var containerWidth = $Jssor$.$ParentNode(arrowLeft).clientWidth;
+      var containerHeight = $Jssor$.$ParentNode(arrowLeft).clientHeight;
+
+      if (_Options.$AutoCenter & 1) {
+        $Jssor$.$CssLeft(arrowLeft, (containerWidth - _ArrowWidth) / 2);
+        $Jssor$.$CssLeft(arrowRight, (containerWidth - _ArrowWidth) / 2);
+      }
+
+      if (_Options.$AutoCenter & 2) {
+        $Jssor$.$CssTop(arrowLeft, (containerHeight - _ArrowHeight) / 2);
+        $Jssor$.$CssTop(arrowRight, (containerHeight - _ArrowHeight) / 2);
+      }
+
+      _Located = true;
+    }
+  };
+
+  var _Initialized;
+  self.$Reset = function (length) {
+    _Length = length;
+    _CurrentIndex = 0;
+
+    if (!_Initialized) {
+
+      $Jssor$.$AddEvent(arrowLeft, "click", $Jssor$.$CreateCallback(null, OnNavigationRequest, -_Steps));
+      $Jssor$.$AddEvent(arrowRight, "click", $Jssor$.$CreateCallback(null, OnNavigationRequest, _Steps));
+
+      $Jssor$.$Buttonize(arrowLeft);
+      $Jssor$.$Buttonize(arrowRight);
+
+      _Initialized = true;
+    }
+
+    //self.$TriggerEvent($JssorNavigatorEvents$.$RESET);
+  };
+
+  //JssorArrowNavigator Constructor
+  {
+    self.$Options = _Options = $Jssor$.$Extend({
+      $Steps: 1
+    }, options);
+
+    _Steps = _Options.$Steps;
+
+    if (_Options.$Scale == false) {
+      $Jssor$.$Attribute(arrowLeft, "noscale", true);
+      $Jssor$.$Attribute(arrowRight, "noscale", true);
+    }
+  }
+};
+
+//$JssorThumbnailNavigator$
+var $JssorThumbnailNavigator$ = window.$JssorThumbnailNavigator$ = function (elmt, options) {
+  var _Self = this;
+  var _Length;
+  var _Count;
+  var _CurrentIndex;
+  var _Options;
+  var _NavigationItems = [];
+
+  var _Width;
+  var _Height;
+  var _Lanes;
+  var _SpacingX;
+  var _SpacingY;
+  var _PrototypeWidth;
+  var _PrototypeHeight;
+  var _DisplayPieces;
+
+  var _Slider;
+  var _CurrentMouseOverIndex = -1;
+
+  var _SlidesContainer;
+  var _ThumbnailPrototype;
+
+  $JssorObject$.call(_Self);
+  elmt = $Jssor$.$GetElement(elmt);
+
+  function NavigationItem(item, index) {
+    var self = this;
+    var _Wrapper;
+    var _Button;
+    var _Thumbnail;
+
+    function Highlight(mouseStatus) {
+      _Button.$Selected(_CurrentIndex == index);
+    }
+
+    function OnNavigationRequest(event) {
+      if (!_Slider.$LastDragSucceded()) {
+        var tail = _Lanes - index % _Lanes;
+        var slideVirtualIndex = _Slider.$GetVirtualIndex((index + tail) / _Lanes - 1);
+        var itemVirtualIndex = slideVirtualIndex * _Lanes + _Lanes - tail;
+        _Self.$TriggerEvent($JssorNavigatorEvents$.$NAVIGATIONREQUEST, itemVirtualIndex);
+      }
+
+      //$JssorDebug$.$Log("navigation request");
+    }
+
+    $JssorDebug$.$Execute(function () {
+      self.$Wrapper = undefined;
+    });
+
+    self.$Index = index;
+
+    self.$Highlight = Highlight;
+
+    //NavigationItem Constructor
+    {
+      _Thumbnail = item.$Thumb || item.$Image || $Jssor$.$CreateDiv();
+      self.$Wrapper = _Wrapper = $Jssor$.$BuildElement(_ThumbnailPrototype, "thumbnailtemplate", _Thumbnail, true);
+
+      _Button = $Jssor$.$Buttonize(_Wrapper);
+      if (_Options.$ActionMode & 1)
+        $Jssor$.$AddEvent(_Wrapper, "click", OnNavigationRequest);
+      if (_Options.$ActionMode & 2)
+        $Jssor$.$AddEvent(_Wrapper, "mouseover", $Jssor$.$MouseOverOutFilter(OnNavigationRequest, _Wrapper));
+    }
+  }
+
+  _Self.$GetCurrentIndex = function () {
+    return _CurrentIndex;
+  };
+
+  _Self.$SetCurrentIndex = function (index, virtualIndex, temp) {
+    var oldIndex = _CurrentIndex;
+    _CurrentIndex = index;
+    if (oldIndex != -1)
+      _NavigationItems[oldIndex].$Highlight();
+    _NavigationItems[index].$Highlight();
+
+    if (!temp) {
+      _Slider.$PlayTo(_Slider.$GetVirtualIndex(Math.floor(virtualIndex / _Lanes)));
+    }
+  };
+
+  _Self.$Show = function (hide) {
+    $Jssor$.$ShowElement(elmt, hide);
+  };
+
+  _Self.$Relocate = $Jssor$.$EmptyFunction;
+
+  var _Initialized;
+  _Self.$Reset = function (length, items, loadingContainer) {
+    if (!_Initialized) {
+      _Length = length;
+      _Count = Math.ceil(_Length / _Lanes);
+      _CurrentIndex = -1;
+      _DisplayPieces = Math.min(_DisplayPieces, items.length);
+
+      var horizontal = _Options.$Orientation & 1;
+
+      var slideWidth = _PrototypeWidth + (_PrototypeWidth + _SpacingX) * (_Lanes - 1) * (1 - horizontal);
+      var slideHeight = _PrototypeHeight + (_PrototypeHeight + _SpacingY) * (_Lanes - 1) * horizontal;
+
+      var slidesContainerWidth = slideWidth + (slideWidth + _SpacingX) * (_DisplayPieces - 1) * horizontal;
+      var slidesContainerHeight = slideHeight + (slideHeight + _SpacingY) * (_DisplayPieces - 1) * (1 - horizontal);
+
+      $Jssor$.$CssPosition(_SlidesContainer, "absolute");
+      $Jssor$.$CssOverflow(_SlidesContainer, "hidden");
+      if (_Options.$AutoCenter & 1) {
+        $Jssor$.$CssLeft(_SlidesContainer, (_Width - slidesContainerWidth) / 2);
+      }
+      if (_Options.$AutoCenter & 2) {
+        $Jssor$.$CssTop(_SlidesContainer, (_Height - slidesContainerHeight) / 2);
+      }
+      //$JssorDebug$.$Execute(function () {
+      //    if (!_Options.$AutoCenter) {
+      //        var slidesContainerTop = $Jssor$.$CssTop(_SlidesContainer);
+      //        var slidesContainerLeft = $Jssor$.$CssLeft(_SlidesContainer);
+
+      //        if (isNaN(slidesContainerTop)) {
+      //            $JssorDebug$.$Fail("Position 'top' wrong specification of thumbnail navigator slides container (<div u=\"thumbnavigator\">...<div u=\"slides\">), \r\nwhen option $ThumbnailNavigatorOptions.$AutoCenter set to 0, it should be specified in pixel (like <div u=\"slides\" style=\"top: 0px;\">)");
+      //        }
+
+      //        if (isNaN(slidesContainerLeft)) {
+      //            $JssorDebug$.$Fail("Position 'left' wrong specification of thumbnail navigator slides container (<div u=\"thumbnavigator\">...<div u=\"slides\">), \r\nwhen option $ThumbnailNavigatorOptions.$AutoCenter set to 0, it should be specified in pixel (like <div u=\"slides\" style=\"left: 0px;\">)");
+      //        }
+      //    }
+      //});
+      $Jssor$.$CssWidth(_SlidesContainer, slidesContainerWidth);
+      $Jssor$.$CssHeight(_SlidesContainer, slidesContainerHeight);
+
+      var slideItemElmts = [];
+      $Jssor$.$Each(items, function (item, index) {
+        var navigationItem = new NavigationItem(item, index);
+        var navigationItemWrapper = navigationItem.$Wrapper;
+
+        var columnIndex = Math.floor(index / _Lanes);
+        var laneIndex = index % _Lanes;
+
+        $Jssor$.$CssLeft(navigationItemWrapper, (_PrototypeWidth + _SpacingX) * laneIndex * (1 - horizontal));
+        $Jssor$.$CssTop(navigationItemWrapper, (_PrototypeHeight + _SpacingY) * laneIndex * horizontal);
+
+        if (!slideItemElmts[columnIndex]) {
+          slideItemElmts[columnIndex] = $Jssor$.$CreateDiv();
+          $Jssor$.$AppendChild(_SlidesContainer, slideItemElmts[columnIndex]);
+        }
+
+        $Jssor$.$AppendChild(slideItemElmts[columnIndex], navigationItemWrapper);
+
+        _NavigationItems.push(navigationItem);
+      });
+
+      var thumbnailSliderOptions = $Jssor$.$Extend({
+        $HWA: false,
+        $AutoPlay: false,
+        $NaviQuitDrag: false,
+        $SlideWidth: slideWidth,
+        $SlideHeight: slideHeight,
+        $SlideSpacing: _SpacingX * horizontal + _SpacingY * (1 - horizontal),
+        $MinDragOffsetToSlide: 12,
+        $SlideDuration: 200,
+        $PauseOnHover: 1,
+        $PlayOrientation: _Options.$Orientation,
+        $DragOrientation: _Options.$DisableDrag ? 0 : _Options.$Orientation
+      }, _Options);
+
+      _Slider = new $JssorSlider$(elmt, thumbnailSliderOptions);
+
+      _Initialized = true;
+    }
+
+    //_Self.$TriggerEvent($JssorNavigatorEvents$.$RESET);
+  };
+
+  //JssorThumbnailNavigator Constructor
+  {
+    _Self.$Options = _Options = $Jssor$.$Extend({
+      $SpacingX: 3,
+      $SpacingY: 3,
+      $DisplayPieces: 1,
+      $Orientation: 1,
+      $AutoCenter: 3,
+      $ActionMode: 1
+    }, options);
+
+    //going to use $Rows instead of $Lanes
+    if (_Options.$Rows != undefined)
+      _Options.$Lanes = _Options.$Rows;
+
+    //Sodo statement for development time intellisence only
+    $JssorDebug$.$Execute(function () {
+      _Options = $Jssor$.$Extend({
+        $Lanes: undefined,
+        $Width: undefined,
+        $Height: undefined
+      }, _Options);
+    });
+
+    _Width = $Jssor$.$CssWidth(elmt);
+    _Height = $Jssor$.$CssHeight(elmt);
+
+    $JssorDebug$.$Execute(function () {
+      if (!_Width)
+        $JssorDebug$.$Fail("width of 'thumbnavigator' container not specified.");
+      if (!_Height)
+        $JssorDebug$.$Fail("height of 'thumbnavigator' container not specified.");
+    });
+
+    _SlidesContainer = $Jssor$.$FindChild(elmt, "slides", true);
+    _ThumbnailPrototype = $Jssor$.$FindChild(_SlidesContainer, "prototype");
+
+    $JssorDebug$.$Execute(function () {
+      if (!_ThumbnailPrototype)
+        $JssorDebug$.$Fail("prototype of 'thumbnavigator' not defined.");
+    });
+
+    _PrototypeWidth = $Jssor$.$CssWidth(_ThumbnailPrototype);
+    _PrototypeHeight = $Jssor$.$CssHeight(_ThumbnailPrototype);
+
+    $Jssor$.$RemoveElement(_ThumbnailPrototype, _SlidesContainer);
+
+    _Lanes = _Options.$Lanes || 1;
+    _SpacingX = _Options.$SpacingX;
+    _SpacingY = _Options.$SpacingY;
+    _DisplayPieces = _Options.$DisplayPieces;
+
+    if (_Options.$Scale == false) {
+      $Jssor$.$Attribute(elmt, "noscale", true);
+    }
+  }
+};
+
+//$JssorCaptionSliderBase$
+function $JssorCaptionSliderBase$() {
+  $JssorAnimator$.call(this, 0, 0);
+  this.$Revert = $Jssor$.$EmptyFunction;
+}
+
+var $JssorCaptionSlider$ = window.$JssorCaptionSlider$ = function (container, captionSlideOptions, playIn) {
+  $JssorDebug$.$Execute(function () {
+    if (!captionSlideOptions.$CaptionTransitions) {
+      $JssorDebug$.$Error("'$CaptionSliderOptions' option error, '$CaptionSliderOptions.$CaptionTransitions' not specified.");
+    }
+  });
+
+  var _Self = this;
+  var _ImmediateOutCaptionHanger;
+  var _PlayMode = playIn ? captionSlideOptions.$PlayInMode : captionSlideOptions.$PlayOutMode;
+
+  var _CaptionTransitions = captionSlideOptions.$CaptionTransitions;
+  var _CaptionTuningFetcher = { $Transition: "t", $Delay: "d", $Duration: "du", x: "x", y: "y", $Rotate: "r", $Zoom: "z", $Opacity: "f", $BeginTime: "b" };
+  var _CaptionTuningTransfer = {
+    $Default: function (value, tuningValue) {
+      if (!isNaN(tuningValue.$Value))
+        value = tuningValue.$Value;
+      else
+        value *= tuningValue.$Percent;
+
+      return value;
+    },
+    $Opacity: function (value, tuningValue) {
+      return this.$Default(value - 1, tuningValue);
+    }
+  };
+  _CaptionTuningTransfer.$Zoom = _CaptionTuningTransfer.$Opacity;
+
+  $JssorAnimator$.call(_Self, 0, 0);
+
+  function GetCaptionItems(element, level) {
+
+    var itemsToPlay = [];
+    var lastTransitionName;
+    var namedTransitions = [];
+    var namedTransitionOrders = [];
+
+    function FetchRawTransition(captionElmt, index) {
+      var rawTransition = {};
+
+      $Jssor$.$Each(_CaptionTuningFetcher, function (fetchAttribute, fetchProperty) {
+        var attributeValue = $Jssor$.$AttributeEx(captionElmt, fetchAttribute + (index || ""));
+        if (attributeValue) {
+          var propertyValue = {};
+
+          if (fetchAttribute == "t") {
+            propertyValue.$Value = attributeValue;
+          }
+          else if (attributeValue.indexOf("%") + 1)
+            propertyValue.$Percent = $Jssor$.$ParseFloat(attributeValue) / 100;
+          else
+            propertyValue.$Value = $Jssor$.$ParseFloat(attributeValue);
+
+          rawTransition[fetchProperty] = propertyValue;
+        }
+      });
+
+      return rawTransition;
+    }
+
+    function GetRandomTransition() {
+      return _CaptionTransitions[Math.floor(Math.random() * _CaptionTransitions.length)];
+    }
+
+    function EvaluateCaptionTransition(transitionName) {
+
+      var transition;
+
+      if (transitionName == "*") {
+        transition = GetRandomTransition();
+      }
+      else if (transitionName) {
+
+        //indexed transition allowed, just the same as named transition
+        var tempTransition = _CaptionTransitions[$Jssor$.$ParseInt(transitionName)] || _CaptionTransitions[transitionName];
+
+        if ($Jssor$.$IsArray(tempTransition)) {
+          if (transitionName != lastTransitionName) {
+            lastTransitionName = transitionName;
+            namedTransitionOrders[transitionName] = 0;
+
+            namedTransitions[transitionName] = tempTransition[Math.floor(Math.random() * tempTransition.length)];
+          }
+          else {
+            namedTransitionOrders[transitionName]++;
+          }
+
+          tempTransition = namedTransitions[transitionName];
+
+          if ($Jssor$.$IsArray(tempTransition)) {
+            tempTransition = tempTransition.length && tempTransition[namedTransitionOrders[transitionName] % tempTransition.length];
+
+            if ($Jssor$.$IsArray(tempTransition)) {
+              //got transition from array level 3, random for all captions
+              tempTransition = tempTransition[Math.floor(Math.random() * tempTransition.length)];
+            }
+            //else {
+            //    //got transition from array level 2, in sequence for all adjacent captions with same name specified
+            //    transition = tempTransition;
+            //}
+          }
+          //else {
+          //    //got transition from array level 1, random but same for all adjacent captions with same name specified
+          //    transition = tempTransition;
+          //}
+        }
+        //else {
+        //    //got transition directly from a simple transition object
+        //    transition = tempTransition;
+        //}
+
+        transition = tempTransition;
+
+        if ($Jssor$.$IsString(transition))
+          transition = EvaluateCaptionTransition(transition);
+      }
+
+      return transition;
+    }
+
+    var captionElmts = $Jssor$.$Children(element);
+    $Jssor$.$Each(captionElmts, function (captionElmt, i) {
+
+      var transitionsWithTuning = [];
+      transitionsWithTuning.$Elmt = captionElmt;
+      var isCaption = $Jssor$.$AttributeEx(captionElmt, "u") == "caption";
+
+      $Jssor$.$Each(playIn ? [0, 3] : [2], function (j, k) {
+
+        if (isCaption) {
+          var transition;
+          var rawTransition;
+
+          if (j != 2 || !$Jssor$.$AttributeEx(captionElmt, "t3")) {
+            rawTransition = FetchRawTransition(captionElmt, j);
+
+            if (j == 2 && !rawTransition.$Transition) {
+              rawTransition.$Delay = rawTransition.$Delay || { $Value: 0 };
+              rawTransition = $Jssor$.$Extend(FetchRawTransition(captionElmt, 0), rawTransition);
+            }
+          }
+
+          if (rawTransition && rawTransition.$Transition) {
+
+            transition = EvaluateCaptionTransition(rawTransition.$Transition.$Value);
+
+            if (transition) {
+
+              //var transitionWithTuning = $Jssor$.$Extend({ $Delay: 0, $ScaleHorizontal: 1, $ScaleVertical: 1 }, transition);
+              var transitionWithTuning = $Jssor$.$Extend({ $Delay: 0 }, transition);
+
+              $Jssor$.$Each(rawTransition, function (rawPropertyValue, propertyName) {
+                var tuningPropertyValue = (_CaptionTuningTransfer[propertyName] || _CaptionTuningTransfer.$Default).apply(_CaptionTuningTransfer, [transitionWithTuning[propertyName], rawTransition[propertyName]]);
+                if (!isNaN(tuningPropertyValue))
+                  transitionWithTuning[propertyName] = tuningPropertyValue;
+              });
+
+              if (!k) {
+                if (rawTransition.$BeginTime)
+                  transitionWithTuning.$BeginTime = rawTransition.$BeginTime.$Value || 0;
+                else if ((_PlayMode) & 2)
+                  transitionWithTuning.$BeginTime = 0;
+              }
+            }
+          }
+
+          transitionsWithTuning.push(transitionWithTuning);
+        }
+
+        if ((level % 2) && !k) {
+          transitionsWithTuning.$Children = GetCaptionItems(captionElmt, level + 1);
+        }
+      });
+
+      itemsToPlay.push(transitionsWithTuning);
+    });
+
+    return itemsToPlay;
+  }
+
+  function CreateAnimator(item, transition, immediateOut) {
+
+    var animatorOptions = {
+      $Easing: transition.$Easing,
+      $Round: transition.$Round,
+      $During: transition.$During,
+      $Reverse: playIn && !immediateOut
+    };
+
+    $JssorDebug$.$Execute(function () {
+      animatorOptions.$CaptionAnimator = true;
+    });
+
+    var captionItem = item;
+    var captionParent = $Jssor$.$ParentNode(item);
+
+    var captionItemWidth = $Jssor$.$CssWidth(captionItem);
+    var captionItemHeight = $Jssor$.$CssHeight(captionItem);
+    var captionParentWidth = $Jssor$.$CssWidth(captionParent);
+    var captionParentHeight = $Jssor$.$CssHeight(captionParent);
+
+    var fromStyles = {};
+    var difStyles = {};
+    var scaleClip = transition.$ScaleClip || 1;
+
+    //Opacity
+    if (transition.$Opacity) {
+      difStyles.$Opacity = 1 - transition.$Opacity;
+    }
+
+    animatorOptions.$OriginalWidth = captionItemWidth;
+    animatorOptions.$OriginalHeight = captionItemHeight;
+
+    //Transform
+    if (transition.$Zoom || transition.$Rotate) {
+      difStyles.$Zoom = (transition.$Zoom || 2) - 2;
+
+      if ($Jssor$.$IsBrowserIe9Earlier() || $Jssor$.$IsBrowserOpera()) {
+        difStyles.$Zoom = Math.min(difStyles.$Zoom, 1);
+      }
+
+      fromStyles.$Zoom = 1;
+
+      var rotate = transition.$Rotate || 0;
+
+      difStyles.$Rotate = rotate * 360;
+      fromStyles.$Rotate = 0;
+    }
+    //Clip
+    else if (transition.$Clip) {
+      var fromStyleClip = { $Top: 0, $Right: captionItemWidth, $Bottom: captionItemHeight, $Left: 0 };
+      var toStyleClip = $Jssor$.$Extend({}, fromStyleClip);
+
+      var blockOffset = toStyleClip.$Offset = {};
+
+      var topBenchmark = transition.$Clip & 4;
+      var bottomBenchmark = transition.$Clip & 8;
+      var leftBenchmark = transition.$Clip & 1;
+      var rightBenchmark = transition.$Clip & 2;
+
+      if (topBenchmark && bottomBenchmark) {
+        blockOffset.$Top = captionItemHeight / 2 * scaleClip;
+        blockOffset.$Bottom = -blockOffset.$Top;
+      }
+      else if (topBenchmark)
+        blockOffset.$Bottom = -captionItemHeight * scaleClip;
+      else if (bottomBenchmark)
+        blockOffset.$Top = captionItemHeight * scaleClip;
+
+      if (leftBenchmark && rightBenchmark) {
+        blockOffset.$Left = captionItemWidth / 2 * scaleClip;
+        blockOffset.$Right = -blockOffset.$Left;
+      }
+      else if (leftBenchmark)
+        blockOffset.$Right = -captionItemWidth * scaleClip;
+      else if (rightBenchmark)
+        blockOffset.$Left = captionItemWidth * scaleClip;
+
+      animatorOptions.$Move = transition.$Move;
+      difStyles.$Clip = toStyleClip;
+      fromStyles.$Clip = fromStyleClip;
+    }
+
+    //Fly
+    {
+      var toLeft = 0;
+      var toTop = 0;
+
+      if (transition.x)
+        toLeft -= captionParentWidth * transition.x;
+
+      if (transition.y)
+        toTop -= captionParentHeight * transition.y;
+
+      if (toLeft || toTop || animatorOptions.$Move) {
+        difStyles.$Left = toLeft;
+        difStyles.$Top = toTop;
+      }
+    }
+
+    //duration
+    var duration = transition.$Duration;
+
+    fromStyles = $Jssor$.$Extend(fromStyles, $Jssor$.$GetStyles(captionItem, difStyles));
+
+    animatorOptions.$Setter = $Jssor$.$StyleSetterEx();
+
+    return new $JssorAnimator$(transition.$Delay, duration, animatorOptions, captionItem, fromStyles, difStyles);
+  }
+
+  function CreateAnimators(streamLineLength, captionItems) {
+
+    $Jssor$.$Each(captionItems, function (captionItem, i) {
+
+      $JssorDebug$.$Execute(function () {
+        if (captionItem.length) {
+          var top = $Jssor$.$CssTop(captionItem.$Elmt);
+          var left = $Jssor$.$CssLeft(captionItem.$Elmt);
+          var width = $Jssor$.$CssWidth(captionItem.$Elmt);
+          var height = $Jssor$.$CssHeight(captionItem.$Elmt);
+
+          var error = null;
+
+          if (isNaN(top))
+            error = "Style 'top' for caption not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
+          else if (isNaN(left))
+            error = "Style 'left' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
+          else if (isNaN(width))
+            error = "Style 'width' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
+          else if (isNaN(height))
+            error = "Style 'height' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
+
+          if (error)
+            $JssorDebug$.$Error("Caption " + (i + 1) + " definition error, \r\n" + error + "\r\n" + captionItem.$Elmt.outerHTML);
+        }
+      });
+
+      var animator;
+      var captionElmt = captionItem.$Elmt;
+      var transition = captionItem[0];
+      var transition3 = captionItem[1];
+
+      if (transition) {
+
+        animator = CreateAnimator(captionElmt, transition);
+        streamLineLength = animator.$Locate(transition.$BeginTime == undefined ? streamLineLength : transition.$BeginTime, 1);
+      }
+
+      streamLineLength = CreateAnimators(streamLineLength, captionItem.$Children);
+
+      if (transition3) {
+        var animator3 = CreateAnimator(captionElmt, transition3, 1);
+        animator3.$Locate(streamLineLength, 1);
+        _Self.$Combine(animator3);
+        _ImmediateOutCaptionHanger.$Combine(animator3);
+      }
+
+      if (animator)
+        _Self.$Combine(animator);
+    });
+
+    return streamLineLength;
+  }
+
+  _Self.$Revert = function () {
+    _Self.$GoToPosition(_Self.$GetPosition_OuterEnd() * (playIn || 0));
+    _ImmediateOutCaptionHanger.$GoToPosition(0);
+  };
+
+  //Constructor
+  {
+    _ImmediateOutCaptionHanger = new $JssorAnimator$(0, 0);
+
+    CreateAnimators(0, _PlayMode ? GetCaptionItems(container, 1) : []);
+  }
+};
+
+var $JssorCaptionSlideo$ = function (container, captionSlideoOptions, playIn) {
+  $JssorDebug$.$Execute(function () {
+    if (!captionSlideoOptions.$CaptionTransitions) {
+      $JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$CaptionTransitions' not specified.");
+    }
+    else if (!$Jssor$.$IsArray(captionSlideoOptions.$CaptionTransitions)) {
+      $JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$CaptionTransitions' is not an array.");
+    }
+  });
+
+  var _This = this;
+
+  var _Easings;
+  var _TransitionConverter = {};
+  var _CaptionTransitions = captionSlideoOptions.$CaptionTransitions;
+
+  $JssorAnimator$.call(_This, 0, 0);
+
+  function ConvertTransition(transition, isEasing) {
+    $Jssor$.$Each(transition, function (property, name) {
+      var performName = _TransitionConverter[name];
+      if (performName) {
+        if (isEasing || name == "e") {
+          if ($Jssor$.$IsNumeric(property)) {
+            property = _Easings[property];
+          }
+          else if ($Jssor$.$IsPlainObject(property)) {
+            ConvertTransition(property, true);
+          }
+        }
+
+        transition[performName] = property;
+        delete transition[name];
+      }
+    });
+  }
+
+  function GetCaptionItems(element, level) {
+
+    var itemsToPlay = [];
+
+    var captionElmts = $Jssor$.$Children(element);
+    $Jssor$.$Each(captionElmts, function (captionElmt, i) {
+      var isCaption = $Jssor$.$AttributeEx(captionElmt, "u") == "caption";
+      if (isCaption) {
+        var transitionName = $Jssor$.$AttributeEx(captionElmt, "t");
+        var transition = _CaptionTransitions[$Jssor$.$ParseInt(transitionName)] || _CaptionTransitions[transitionName];
+
+        var transitionName2 = $Jssor$.$AttributeEx(captionElmt, "t2");
+        var transition2 = _CaptionTransitions[$Jssor$.$ParseInt(transitionName2)] || _CaptionTransitions[transitionName2];
+
+        var itemToPlay = { $Elmt: captionElmt, $Transition: transition, $Transition2: transition2 };
+        if (level < 3) {
+          itemsToPlay.concat(GetCaptionItems(captionElmt, level + 1));
+        }
+        itemsToPlay.push(itemToPlay);
+      }
+    });
+
+    return itemsToPlay;
+  }
+
+  function CreateAnimator(captionElmt, transitions, lastStyles, forIn) {
+
+    $Jssor$.$Each(transitions, function (transition) {
+      ConvertTransition(transition);
+
+      var animatorOptions = {
+        $Easing: transition.$Easing,
+        $Round: transition.$Round,
+        $During: transition.$During,
+        $Setter: $Jssor$.$StyleSetterEx()
+      };
+
+      var fromStyles = $Jssor$.$Extend($Jssor$.$GetStyles(captionItem, transition), lastStyles);
+
+      var animator = new $JssorAnimator$(transition.b || 0, transition.d, animatorOptions, captionElmt, fromStyles, transition);
+
+      !forIn == !playIn && _This.$Combine(animator);
+
+      var castOptions;
+      lastStyles = $Jssor$.$Extend(lastStyles, $Jssor$.$Cast(fromStyles, transition, 1, animatorOptions.$Easing, animatorOptions.$During, animatorOptions.$Round, animatorOptions, castOptions));
+    });
+
+    return lastStyles;
+  }
+
+  function CreateAnimators(captionItems) {
+
+    $Jssor$.$Each(captionItems, function (captionItem, i) {
+
+      $JssorDebug$.$Execute(function () {
+        if (captionItem.length) {
+          var top = $Jssor$.$CssTop(captionItem.$Elmt);
+          var left = $Jssor$.$CssLeft(captionItem.$Elmt);
+          var width = $Jssor$.$CssWidth(captionItem.$Elmt);
+          var height = $Jssor$.$CssHeight(captionItem.$Elmt);
+
+          var error = null;
+
+          if (isNaN(top))
+            error = "style 'top' not specified";
+          else if (isNaN(left))
+            error = "style 'left' not specified";
+          else if (isNaN(width))
+            error = "style 'width' not specified";
+          else if (isNaN(height))
+            error = "style 'height' not specified";
+
+          if (error)
+            throw new Error("Caption " + (i + 1) + " definition error, " + error + ".\r\n" + captionItem.$Elmt.outerHTML);
+        }
+      });
+
+      var captionElmt = captionItem.$Elmt;
+
+      var captionItemWidth = $Jssor$.$CssWidth(captionItem);
+      var captionItemHeight = $Jssor$.$CssHeight(captionItem);
+      var captionParentWidth = $Jssor$.$CssWidth(captionParent);
+      var captionParentHeight = $Jssor$.$CssHeight(captionParent);
+
+      var lastStyles = { $Zoom: 1, $Rotate: 0, $Clip: { $Top: 0, $Right: captionItemWidth, $Bottom: captionItemHeight, $Left: 0 } };
+
+      lastStyles = CreateAnimator(captionElmt, captionItem.$Transition, lastStyles, true);
+      CreateAnimator(captionElmt, captionItem.$Transition2, lastStyles, false);
+    });
+  }
+
+  _This.$Revert = function () {
+    _This.$GoToPosition(-1, true);
+  }
+
+  //Constructor
+  {
+    _Easings = [
+      $JssorEasing$.$EaseSwing,
+      $JssorEasing$.$EaseLinear,
+      $JssorEasing$.$EaseInQuad,
+      $JssorEasing$.$EaseOutQuad,
+      $JssorEasing$.$EaseInOutQuad,
+      $JssorEasing$.$EaseInCubic,
+      $JssorEasing$.$EaseOutCubic,
+      $JssorEasing$.$EaseInOutCubic,
+      $JssorEasing$.$EaseInQuart,
+      $JssorEasing$.$EaseOutQuart,
+      $JssorEasing$.$EaseInOutQuart,
+      $JssorEasing$.$EaseInQuint,
+      $JssorEasing$.$EaseOutQuint,
+      $JssorEasing$.$EaseInOutQuint,
+      $JssorEasing$.$EaseInSine,
+      $JssorEasing$.$EaseOutSine,
+      $JssorEasing$.$EaseInOutSine,
+      $JssorEasing$.$EaseInExpo,
+      $JssorEasing$.$EaseOutExpo,
+      $JssorEasing$.$EaseInOutExpo,
+      $JssorEasing$.$EaseInCirc,
+      $JssorEasing$.$EaseOutCirc,
+      $JssorEasing$.$EaseInOutCirc,
+      $JssorEasing$.$EaseInElastic,
+      $JssorEasing$.$EaseOutElastic,
+      $JssorEasing$.$EaseInOutElastic,
+      $JssorEasing$.$EaseInBack,
+      $JssorEasing$.$EaseOutBack,
+      $JssorEasing$.$EaseInOutBack,
+      $JssorEasing$.$EaseInBounce,
+      $JssorEasing$.$EaseOutBounce,
+      $JssorEasing$.$EaseInOutBounce//,
+      //$JssorEasing$.$EaseGoBack,
+      //$JssorEasing$.$EaseInWave,
+      //$JssorEasing$.$EaseOutWave,
+      //$JssorEasing$.$EaseOutJump,
+      //$JssorEasing$.$EaseInJump
+    ];
+
+    var translater = {
+      $Top: "y",          //top
+      $Left: "x",         //left
+      $Bottom: "m",       //bottom
+      $Right: "t",        //right
+      $Zoom: "s",         //zoom/scale
+      $Rotate: "r",       //rotate
+      $Opacity: "o",      //opacity
+      $Easing: "e",       //easing
+      $ZIndex: "i",       //zindex
+      $Round: "rd",       //round
+      $During: "du",      //during
+      $Duration: "d"//,   //duration
+      //$Begin: "b"
+    };
+
+    $Jssor$.$Each(translater, function (prop, newProp) {
+      _TransitionConverter[prop] = newProp;
+    });
+
+    CreateAnimators(GetCaptionItems(container, 1));
+  }
+};
+
+//Event Table
+
+//$EVT_CLICK = 21;			    function(slideIndex[, event])
+//$EVT_DRAG_START = 22;		    function(position[, virtualPosition, event])
+//$EVT_DRAG_END = 23;		    function(position, startPosition[, virtualPosition, virtualStartPosition, event])
+//$EVT_SWIPE_START = 24;		function(position[, virtualPosition])
+//$EVT_SWIPE_END = 25;		    function(position[, virtualPosition])
+
+//$EVT_LOAD_START = 26;			function(slideIndex)
+//$EVT_LOAD_END = 27;			function(slideIndex)
+
+//$EVT_POSITION_CHANGE = 202;	function(position, fromPosition[, virtualPosition, virtualFromPosition])
+//$EVT_PARK = 203;			    function(slideIndex, fromIndex)
+
+//$EVT_PROGRESS_CHANGE = 208;	function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
+//$EVT_STATE_CHANGE = 209;	    function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
+
+//$EVT_ROLLBACK_START = 210;	function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
+//$EVT_ROLLBACK_END = 211;	    function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
+
+//$EVT_SLIDESHOW_START = 206;   function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
+//$EVT_SLIDESHOW_END = 207;     function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
+