Html - Jssor Arrow navigator doesnt show up

Question

Here is my slider js code:

jQuery(document).ready(function ($) {
            var options = 
    {
         $AutoPlay: true,
         $FillMode: 2, 
         $Idle: 6000,
         $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $ChanceToShow: 2,
        }
    };
    var jssor_slider1 = new $JssorSlider$("sliderContainer", options);
    var jssor_slider1 = new $JssorSlider$('sliderContainer', options);


function ScaleSlider() 
{
 var parentWidth = $('#sliderContainer').parent().width(); 
if (parentWidth)
    jssor_slider1.$ScaleWidth(Math.min(parentWidth, 1920));
else
    window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);

});

And html:

<div id="sliderContainer" style="position:relative; top:0; left:0px; width:1300px; height:500px; margin-left:auto; margin-right:auto;">
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; right: 0px; top: 0px; width: 1300px; height: 500px;">
    <div><img u="image" src="Img/Slider/slide1.jpg" /></div>
    <div><img u="image" src="Img/Slider/slide2.jpg" /></div>
    <div><img u="image" src="Img/Slider/slide3.jpg" /></div>
    <div><img u="image" src="Img/Slider/slide4.jpg" /></div>

</div>   
 <!--#region Arrow Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
    <style>
        /* jssor slider arrow navigator skin 09 css */
        /*
        .jssora09l                  (normal)
        .jssora09r                  (normal)
        .jssora09l:hover            (normal mouseover)
        .jssora09r:hover            (normal mouseover)
        .jssora09l.jssora09ldn      (mousedown)
        .jssora09r.jssora09rdn      (mousedown)
        */
        .jssora09l, .jssora09r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 50px;
            height: 50px;
            cursor: pointer;
            background: url(../img/a09.png) no-repeat;
            overflow: hidden;
            opacity: .4;
            filter: alpha(opacity=40);
        }
        .jssora09l { background-position: -5px -35px; }
        .jssora09r { background-position: -65px -35px; }
        .jssora09l:hover { background-position: -5px -35px; opacity: .8; filter:alpha(opacity=80); }
        .jssora09r:hover { background-position: -65px -35px; opacity: .8; filter:alpha(opacity=80); }
        .jssora09l.jssora09ldn { background-position: -5px -35px; opacity: .3; filter:alpha(opacity=30); }
        .jssora09r.jssora09rdn { background-position: -65px -35px; opacity: .3; filter:alpha(opacity=30); }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora09l" style="top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora09r" style="top: 123px; right: 8px;">
    </span>
    <!--#endregion Arrow Navigator Skin End -->

<div u="any" id="sliderTitle"><div class="textWrap" style="position:relative; top:40%;"><h1>123</h1><br>
<span style="color:#9B9999; font-size:80%;">123</span></div></div>
</div>

Scaling works perfectly. Maybe i missed something, or whatever; whats wrong with my code? Its simply copy-pasted from here: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html

Answer 1

The code works in my browser.

There could be a few reasons:

1- Make sure you have the image in your (img/) folder (a09.png).

2- Change your path to the image from url(../img/a09.png) to url(img/a09.png) to see if your arrow image will show up.

3- The location of the images may need adjusting depending on your container/photo size. Looks like it is a full screen slider but regardless of my photos being smaller, the Right and Left Arrow Navigator showed up.