title: Jssor Image Slider arrows not showing
body: <p>I can't get the arrows on the image slider to appear... I've tried changing the positioning and display but that hasn't worked. Since putting the code on my Index page the only things I've changed are: removing "overflow:hidden" on the div id "jssor_1"; the actual size of the slider (width:500px;height:400px); and the rotation speed of each slide... The code was taken from the "no-jquery.html" file. As you can see on the "background: url" part of the code I've already set the source to the "a02.png". </p>
  
  <p>I also noticed that the left arrow, whilst not visible on the slider, does still work (I can hover over it and click it).</p>
  
  <p>I feel like I'm missing something simple here.
  HTML:</p>
  
  <pre><code> &lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
      &lt;head&gt;
  
  
  &lt;title&gt;Nightfall Gaming&lt;/title&gt;
      &lt;link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/&gt;
  &lt;/head&gt;
  
  &lt;body bgcolor="#FFFFFF"&gt;
  
  &lt;!--site navbar--&gt;  
  &lt;div id="navbar"&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="Index.html" class="active" id="active2"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Game News&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Game Reviews&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Xbox 360&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Xbox One&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;PS3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;PS4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;PC&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Wii&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="ContactUs.html"&gt;Contact Us/About Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;!--site logo--&gt;
  &lt;div id="logo"&gt;
  &lt;a href="Index.html"&gt;&lt;img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!--mainbody div--&gt; 
  &lt;div id="mainbody"&gt;
      &lt;div id="slider"&gt;
      &lt;script type="text/javascript" src="C:\Users\Cam\Desktop\NightfallGaming\js\jssor.slider.min.js" async&gt;&lt;/script&gt;
      &lt;script&gt;
          jssor_1_slider_init = function() {
  
              var jssor_1_SlideoTransitions = [
                [{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
                [{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}],
                [{b:0.0,d:600.0,x:410.0,e:{x:27.0}}],
                [{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,o:1.0,e:{o:5.0}}],
                [{b:-1.0,d:1.0,c:{x:175.0,t:-175.0}},{b:0.0,d:800.0,c:{x:-175.0,t:175.0},e:{c:{x:7.0,t:7.0}}}],
                [{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,x:-570.0,o:1.0,e:{x:6.0}}],
                [{b:-1.0,d:1.0,o:-1.0,r:-180.0},{b:0.0,d:800.0,o:1.0,r:180.0,e:{r:7.0}}],
                [{b:0.0,d:1000.0,y:80.0,e:{y:24.0}},{b:1000.0,d:1100.0,x:570.0,y:170.0,o:-1.0,r:30.0,sX:9.0,sY:9.0,e:{x:2.0,y:6.0,r:1.0,sX:5.0,sY:5.0}}],
                [{b:2000.0,d:600.0,rY:30.0}],
                [{b:0.0,d:500.0,x:-105.0},{b:500.0,d:500.0,x:230.0},{b:1000.0,d:500.0,y:-120.0},{b:1500.0,d:500.0,x:-70.0,y:120.0},{b:2600.0,d:500.0,y:-80.0},{b:3100.0,d:900.0,y:160.0,e:{y:24.0}}],
                [{b:0.0,d:1000.0,o:-0.4,rX:2.0,rY:1.0},{b:1000.0,d:1000.0,rY:1.0},{b:2000.0,d:1000.0,rX:-1.0},{b:3000.0,d:1000.0,rY:-1.0},{b:4000.0,d:1000.0,o:0.4,rX:-1.0,rY:-1.0}]
              ];
  
              var jssor_1_options = {
                $AutoPlay: true,
                $Idle: 4000,
                $CaptionSliderOptions: {
                  $Class: $JssorCaptionSlideo$,
                  $Transitions: jssor_1_SlideoTransitions,
                  $Breaks: [
                    [{d:2000,b:1000}]
                  ]
                },
                $ArrowNavigatorOptions: {
                  $Class: $JssorArrowNavigator$
                },
                $BulletNavigatorOptions: {
                  $Class: $JssorBulletNavigator$
                }
              };
  
              var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
  
              //responsive code begin
              //you can remove responsive code if you don't want the slider scales while window resizes
              function ScaleSlider() {
                  var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                  if (refSize) {
                      refSize = Math.min(refSize, 600);
                      jssor_1_slider.$ScaleWidth(refSize);
                  }
                  else {
                      window.setTimeout(ScaleSlider, 30);
                  }
              }
              ScaleSlider();
              $Jssor$.$AddEvent(window, "load", ScaleSlider);
              $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
              $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
              //responsive code end
          };
      &lt;/script&gt;
  
      &lt;style&gt;
  
          /* jssor slider bullet navigator skin 01 css */
          /*
          .jssorb01 div           (normal)
          .jssorb01 div:hover     (normal mouseover)
          .jssorb01 .av           (active)
          .jssorb01 .av:hover     (active mouseover)
          .jssorb01 .dn           (mousedown)
          */
          .jssorb01 {
              position: absolute;
          }
          .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
              position: absolute;
              /* size of bullet elment */
              width: 12px;
              height: 12px;
              filter: alpha(opacity=70);
              opacity: .7;
              overflow: hidden;
              cursor: pointer;
              border: #000 1px solid;
          }
          .jssorb01 div { background-color: gray; }
          .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
          .jssorb01 .av { background-color: #fff; }
          .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
  
          /* jssor slider arrow navigator skin 02 css */
          /*
          .jssora02l                  (normal)
          .jssora02r                  (normal)
          .jssora02l:hover            (normal mouseover)
          .jssora02r:hover            (normal mouseover)
          .jssora02l.jssora02ldn      (mousedown)
          .jssora02r.jssora02rdn      (mousedown)
          */
          .jssora02l, .jssora02r {
              display: block;
              position: absolute;
              /* size of arrow element */
              width: 55px;
              height: 55px;
              cursor: pointer;
              background: url('C:\Users\Cam\Desktop\NightfallGaming\img\a02.png') no-repeat; 
              overflow: hidden;
          }
  
          .jssora02l { background-position: -3px -33px; }
          .jssora02r { background-position: -63px -33px; }
          .jssora02l:hover { background-position: -123px -33px; }
          .jssora02r:hover { background-position: -183px -33px; }
          .jssora02l.jssora02ldn { background-position: -3px -33px; }
          .jssora02r.jssora02rdn { background-position: -63px -33px; }
      &lt;/style&gt;
  
  
      &lt;div id="jssor_1" style="position: relative; margin: 0 auto; top: 228px; left: -180px; width: 500px; height: 400px;"&gt;
          &lt;!-- Loading Screen --&gt;
          &lt;div data-u="loading" style="position: absolute; top: 0px; left: 0px;"&gt;
              &lt;div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; 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;div data-u="slides" style="cursor: default; position: relative; 
          : 0px; left: 0px; width: 800px; height: 400px; overflow: hidden;"&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\001.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="img/007.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\003.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="img/004.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="img/005.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="img/006.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="img/009.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-b="0" data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="img/008.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="img/011.jpg" /&gt;
              &lt;/div&gt;
              &lt;div data-p="112.50" style="display: none;"&gt;
                  &lt;img data-u="image" src="img/010.jpg" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Bullet Navigator --&gt;
          &lt;div data-u="navigator" class="jssorb01" style="bottom:16px;right:-8px;"&gt;
              &lt;div data-u="prototype" style="width:12px;height:12px;"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Arrow Navigator --&gt;
          &lt;span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"&gt;&lt;/span&gt;
          &lt;span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"&gt;&lt;/span&gt;
      &lt;/div&gt;  
      &lt;script&gt;
          jssor_1_slider_init();
      &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>