title: jssor slider transition dont work
body: <p>I have problem with jssor slider. It only show me first photo. I think the problem is in the responsive code. 
  I want make full width and full height slider, also fully responsive. When open on smaller devices it cut photo. Please help.</p>
  
  <p>Please help.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;title&gt;Slider with Slideshow Example - Jssor Slider, Slideshow with Javascript Source Code&lt;/title&gt;
  &lt;/head&gt;
  &lt;body style="background:#fff;"&gt;
      &lt;!-- it works the same with all jquery version from 1.x to 2.x --&gt;
      &lt;script type="text/javascript" src="../js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release --&gt;
      &lt;!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) --&gt;
      &lt;script type="text/javascript" src="../js/jssor.core.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../js/jssor.utils.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../js/jssor.slider.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          jQuery(document).ready(function ($) {
              //Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
              //Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
  
              var _SlideshowTransitions = [
              //Fade
              {$Duration:1200,x:1,$Delay:50,$Cols:8,$Rows:4,$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad},$Opacity:2}
              ];
  
              var options = {
                  $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                  $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, 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)
                  $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                  $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                  $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                      $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                      $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                      $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                      $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
                  }
              };
  
              var jssor_slider1 = new $JssorSlider$("slider1_container", options);
  
          });
  
          //responsive code begin
      //you can remove responsive code if you don't want the slider scales while window resizes
      function ScaleSlider() {
          var windowWidth = $(window).width();
  
          if (windowWidth) {
              var windowHeight = $(window).height();
              var originalWidth = jssor_slider1.$OriginalWidth();
              var originalHeight = jssor_slider1.$OriginalHeight();
  
              var scaleWidth = windowWidth;
              if (originalWidth / windowWidth &gt; originalHeight / windowHeight) {
                  scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
              }
  
              jssor_slider1.$ScaleWidth(scaleWidth);
          }
          else
              window.setTimeout(ScaleSlider, 30);
      }
  
      ScaleSlider();
  
      $(window).bind("load", ScaleSlider);
      $(window).bind("resize", ScaleSlider);
      $(window).bind("orientationchange", ScaleSlider);
      //responsive code end
  
  
      &lt;/script&gt;
  
      &lt;!-- Jssor Slider Begin --&gt;
      &lt;!-- You can move inline styles to css file or css block. --&gt;
  
       &lt;!-- ORIGINAL SLIDER!!!!!!!!!!!!!
      &lt;div id="slider1_container" style="position: relative; width: 600px;
          height: 300px;"&gt; END!!!!!!!!!!!!!!!!!!!! --&gt;
  
          &lt;div style="position: relative; width: 100%; overflow: hidden;"&gt;
      &lt;div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;"&gt;
  
          &lt;!-- use 'margin: 0 auto;' to auto center element in parent container --&gt;
          &lt;div id="slider1_container" style="margin: 0 auto;" &gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
          &lt;!-- Loading Screen --&gt;
          &lt;div u="loading" style="position: absolute; top: 0px; left: 0px;"&gt;
              &lt;div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                  background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;"&gt;
              &lt;/div&gt;
              &lt;div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
                  top: 0px; left: 0px;width: 100%;height:100%;"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Slides Container --&gt;
          &lt;div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px;  height: 100%;
              overflow: hidden;"&gt;
              &lt;div&gt;
                  &lt;img u=image src="../img/landscape/01.png" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;img u=image src="../img/landscape/02.png" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;img u=image src="../img/landscape/03.jpg" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;img u=image src="../img/landscape/04.jpg" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a style="display: none" href="http://www.jssor.com"&gt;jquery content slider&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>