Arrow Navigation is displayed but does not function

Question

I am using Jssor Slider 18.0 with Jquery 1.3.2. The arrow navigator does show up on my slides but it seems to be disabled. It does not work and neither does the style change on hover.

In addition to using jssor.slider.mini.js I am also using Jquery jSuggest, Jquery validate and uupaa-suketrans.js. Hope there is nothing conflicting.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
var options = {
        $AutoPlay: false,                          
        $AutoPlaySteps: 2,                         
        $AutoPlayInterval: 3000,                   
        $PauseOnHover: 1,                          
        $ArrowKeyNavigation: true,                 
        $SlideDuration: 500,                       
        $MinDragOffsetToSlide: 20,                 
        $SlideSpacing: 0,                          
        $Cols: 1,                         
        $Align: 0,                       
        $UISearchMode: 1,                          
        $PlayOrientation: 1,                       
        $DragOrientation: 3,                       
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,         
            $ChanceToShow: 2,                      
            $Steps: 1                              
        }
    };

    var jssor_slider1 = new $JssorSlider$("slider1_container", options);
</script>

/* jssor slider arrow navigator skin 12 css */
/*
.jssora12l                  (normal)
.jssora12r                  (normal)
.jssora12l:hover            (normal mouseover)
.jssora12r:hover            (normal mouseover)
.jssora12l.jssora12ldn      (mousedown)
.jssora12r.jssora12rdn      (mousedown)
*/
.jssora12l, .jssora12r {
    position: absolute;
    /* size of arrow element */
    width: 30px;
    height: 46px;
    cursor: pointer;
    background: url(../img/zurple/a12.png) no-repeat;
}
.jssora12l { background-position: -16px -37px; }
.jssora12r { background-position: -75px -37px; }
.jssora12l:hover { background-position: -136px -37px; }
.jssora12r:hover { background-position: -195px -37px; }
.jssora12l.jssora12ldn { background-position: -256px -37px; }
.jssora12r.jssora12rdn { background-position: -315px -37px; }

        <!-- Slide show section -->

        <!-- Jssor Slider Begin -->
        <!-- To move inline styles to css file/block, please specify a class name for each element. -->
        <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 543px; height: 320px; ">

            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 543px; height: 290px; overflow: hidden;">
                    <?php foreach ... as $p): ?>
                        <div>
                            <img u="image" src="<?=$p ?>"/>
                        </div>
                    <?php endforeach; ?>
            </div>

            <!--#region Arrow Navigator Skin Begin -->
            <!-- Arrow Left -->
            <span u="arrowleft" class="jssora12l" style="top: 123px; left: 0px;">
            </span>
                <!-- Arrow Right -->
            <span u="arrowright" class="jssora12r" style="top: 123px; right: 0px;">
            </span>
            <!--#endregion Arrow Navigator Skin End -->
        </div>
        <!-- Jssor Slider End -->

        <!-- end of slide show section -->

Any help would be appreciated.