title: A few problems regarding JSSOR Slider
body: <p>I downloaded the JSSOR Slider FULLPACK and decided to use this gallery: <a href="http://www.jssor.com/demos/image-gallery.html" rel="nofollow noreferrer">http://www.jssor.com/demos/image-gallery.html</a></p>
  
  <p>I inserted this into my page the same as was shown in the source. But no thumbnails or navigation arrows show.</p>
  
  <p>I then changed the dimensions of the current image shown to 306x306 as this is the size of the images I will be using and changed thumbnail size to 64x64 as this is the size of my thumbnails.</p>
  
  <p>The main images of the slideshow work but the thumbnails are part of the main slideshow and not below the main image. Also still no nav arrows show.</p>
  
  <p>Here are 2 images to show you:
  <a href="http://www.imagebam.com/image/baa18d322946581" rel="nofollow noreferrer">http://www.imagebam.com/image/baa18d322946581</a>
  <a href="http://www.imagebam.com/image/48d327322946583" rel="nofollow noreferrer">http://www.imagebam.com/image/48d327322946583</a></p>
  
  <p>I know the arrows don't show because they are at default values:</p>
  
  <pre><code>&lt;span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px;   left: 8px;"&gt;
  
  &lt;span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px"&gt;
  </code></pre>
  
  <p>I am not sure what values I need here though.</p>
  
  <p>Here is the full code for the slideshow in my html file:</p>
  
  <pre><code>&lt;div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 306px; height: 372px; background: #191919; overflow: hidden;"&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: #000000; top: 0px; left: 0px;width: 100%;height:100%;"&gt;
          &lt;/div&gt;
          &lt;div style="position: absolute; display: block; background: url(../imag/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; width: 306px; height: 306px; overflow: hidden;"&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee1.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee1_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee3.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee3_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee12.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee12_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee16.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee16_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee17.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee17_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee18.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee18_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee19.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee19_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee25.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee25_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee26.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee26_thumb.jpg" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="../images/dundee27.jpg" /&gt;
              &lt;img u="thumb" src="../images/thumbs/dundee27_thumb.jpg" /&gt;
          &lt;/div&gt;
  
  
      &lt;!-- Arrow Navigator Skin Begin --&gt;
      &lt;style&gt;
          /* jssor slider arrow navigator skin 05 css */
          /*
          .jssora05l              (normal)
          .jssora05r              (normal)
          .jssora05l:hover        (normal mouseover)
          .jssora05r:hover        (normal mouseover)
          .jssora05ldn            (mousedown)
          .jssora05rdn            (mousedown)
          */
          .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
          {
              position: absolute;
              cursor: pointer;
              display: block;
              background: url(../images/a17.png) no-repeat;
              overflow:hidden;
          }
          .jssora05l { background-position: -10px -40px; }
          .jssora05r { background-position: -70px -40px; }
          .jssora05l:hover { background-position: -130px -40px; }
          .jssora05r:hover { background-position: -190px -40px; }
          .jssora05ldn { background-position: -250px -40px; }
          .jssora05rdn { background-position: -310px -40px; }
      &lt;/style&gt;
      &lt;!-- Arrow Left --&gt;
      &lt;span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 8px;"&gt;
      &lt;/span&gt;
      &lt;!-- Arrow Right --&gt;
      &lt;span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px"&gt;
      &lt;/span&gt;
      &lt;!-- Arrow Navigator Skin End --&gt;
  
      &lt;!-- Thumbnail Navigator Skin Begin --&gt;
      &lt;div u="thumbnavigator" class="jssort01" style="position: absolute; width: 306px; height: 64px; left:0px; bottom: 0px;"&gt;
          &lt;!-- Thumbnail Item Skin Begin --&gt;
          &lt;style&gt;
              /* jssor slider thumbnail navigator skin 01 css */
              /*
              .jssort01 .p           (normal)
              .jssort01 .p:hover     (normal mouseover)
              .jssort01 .pav           (active)
              .jssort01 .pav:hover     (active mouseover)
              .jssort01 .pdn           (mousedown)
              */
              .jssort01 .w {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 100%;
                  height: 100%;
              }
  
              .jssort01 .c {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 64px;
                  height: 64px;
                  border: #000 2px solid;
              }
  
              .jssort01 .p:hover .c, .jssort01 .pav:hover .c, .jssort01 .pav .c {
                  background: url(../images/t01.png) center center;
                  border-width: 0px;
                  top: 2px;
                  left: 2px;
                  width: 64px;
                  height: 64px;
              }
  
              .jssort01 .p:hover .c, .jssort01 .pav:hover .c {
                  top: 0px;
                  left: 0px;
                  width: 66px;
                  height: 66px;
                  border: #fff 1px solid;
              }
          &lt;/style&gt;
          &lt;div u="slides" style="cursor: move;"&gt;
              &lt;div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;"&gt;
                  &lt;div class=w&gt;&lt;thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"&gt;&lt;/thumbnailtemplate&gt;&lt;/div&gt;
                  &lt;div class=c&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Thumbnail Item Skin End --&gt;
      &lt;/div&gt;
      &lt;!-- Thumbnail Navigator Skin End --&gt;
      &lt;a style="display: none" href="http://www.jssor.com"&gt;CE0832a jQuery Slider&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- Jssor Slider End --&gt;
  &lt;img width=0 height=0 /&gt;
  
  &lt;!--&lt;div id="debuginfo" style="width:300px;height:300px;background-color:Red;color:White;Padding:5px;"&gt;&lt;/div&gt;--&gt;    
  </code></pre>
  
  <p>And here is the script code:</p>
  
  <pre><code>jQuery(document).ready(function ($) {
  
      var _SlideshowTransitions = [
      //Fade in L
          {$Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
      //Fade out R
          , { $Duration: 1200, $SlideOut: true, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
      //Fade in R
          , { $Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
      //Fade out L
          , { $Duration: 1200, $SlideOut: true, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
  
      //Fade in T
          , { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
      //Fade out B
          , { $Duration: 1200, $SlideOut: true, $FlyDirection: 8, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
      //Fade in B
          , { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 8, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
      //Fade out T
          , { $Duration: 1200, $SlideOut: true, $FlyDirection: 4, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
  
      //Fade in LR
          , { $Duration: 1200, $Cols: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
      //Fade out LR
          , { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
      //Fade in TB
          , { $Duration: 1200, $Rows: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
      //Fade out TB
          , { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
  
      //Fade in LR Chess
          , { $Duration: 1200, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
      //Fade out LR Chess
          , { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 8, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
      //Fade in TB Chess
          , { $Duration: 1200, $Rows: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Row: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
      //Fade out TB Chess
          , { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 2, $ChessMode: { $Row: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
  
      //Fade in Corners
          , { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }
      //Fade out Corners
          , { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }
  
      //Fade Clip in H
          , { $Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: { $Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
      //Fade Clip out H
          , { $Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
      //Fade Clip in V
          , { $Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: { $Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
      //Fade Clip out V
          , { $Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
          ];
  
      var options = {
          $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
          $PauseOnHover: 3,                                //[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, default value is 3
  
          $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)
          $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
          $SlideDuration: 800,                                //Specifies default duration (swipe) for slide in milliseconds
  
          $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
          },
  
          $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
              $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
              $ChanceToShow: 1                               //[Required] 0 Never, 1 Mouse Over, 2 Always
          },
  
          $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
              $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
              $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
  
              $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
              $SpacingX: 8,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
              $Cols: 10,                             //[Optional] Number of pieces to display, default value is 1
              $Align: 360                          //[Optional] The offset position to park thumbnail
          }
      };
  
      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 parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
          if (parentWidth)
              jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 306), 306));
          else
              window.setTimeout(ScaleSlider, 30);
      }
  
      ScaleSlider();
  
      $(window).bind("load", ScaleSlider);
      $(window).bind("resize", ScaleSlider);
      $(window).bind("orientationchange", ScaleSlider);
      //responsive code end
  });     
  </code></pre>
  
  <p>Now have these problems:</p>
  
  <ol>
  <li><p>The black box around the thumbnails are off .....
  <a href="http://www.imagebam.com/image/cd9d52323141060" rel="nofollow noreferrer">http://www.imagebam.com/image/cd9d52323141060</a></p></li>
  <li><p>The slideshow is to the very left of the page ... I need it centred but none of the methods I try work.</p></li>
  <li><p>I have quite a few images in the slideshow but cant see any other thumbnails than shown in the image above ... I can drag thumbnails left or right. It just snaps back to the thumbnails in the image.</p></li>
  </ol>