jquery - Jssor arrow navigation autocentered to the ceileing -

i have problem jssor slider. seen on image arrows bound top of div instead of middle of it. guess it's issue measuring, although width preserved right. of pasted content wrapped bootstrap container.

html structure:

            <div id="slider1_container">                     <!-- slides container -->                 <div u="slides" id="slides">                     <div><img u="image" src="@routes.assets.versioned("images/image1.jpg")" /></div>                     <div><img u="image" src="@routes.assets.versioned("images/image2.jpg")" /></div>                 </div>                 <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">                     <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>                     <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>                 </div>                      <!-- arrow navigator -->                 <span data-u="arrowleft" class="jssora22l" style="top:150px;left:12px;width:40px;height:58px;" ></span>                 <span data-u="arrowright" class="jssora22r" style="top:150px;right:12px;width:40px;height:58px;" ></span>             </div> <!-- / slider --> 

css:

#slider1_container {     position: relative;     margin: 0 auto;     top: 0px;     left: 0px;     width: 1300px;     height: 500px;     overflow: hidden;     visibility: hidden; }  #slides {     cursor: default;     position: relative;     top: 0px;     left: 0px;     width: 1300px;     height: 500px;     overflow: hidden; }  /* jssor slider bullet navigator skin 05 css */ /* .jssorb05 div           (normal) .jssorb05 div:hover     (normal mouseover) .jssorb05 .av           (active) .jssorb05 .av:hover     (active mouseover) .jssorb05 .dn           (mousedown) */ .jssorb05 {     position: absolute; }  .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {     position: absolute;     /* size of bullet elment */     width: 16px;     height: 16px;     background: url('../images/b05.png') no-repeat;     overflow: hidden;     cursor: pointer; }  .jssorb05 div {     background-position: -7px -7px; }  .jssorb05 div:hover, .jssorb05 .av:hover {     background-position: -37px -7px; }  .jssorb05 .av {     background-position: -67px -7px; }  .jssorb05 .dn, .jssorb05 .dn:hover {     background-position: -97px -7px; }  /* jssor slider arrow navigator skin 22 css */ /* .jssora22l                  (normal) .jssora22r                  (normal) .jssora22l:hover            (normal mouseover) .jssora22r:hover            (normal mouseover) .jssora22l.jssora22ldn      (mousedown) .jssora22r.jssora22rdn      (mousedown) */ .jssora22l, .jssora22r {     display: block;     position: absolute;     /* size of arrow element */     width: 40px;     height: 58px;     cursor: pointer;     background: url('../images/a22.png') center center no-repeat;     overflow: hidden; }  .jssora22l {     background-position: -10px -31px; }  .jssora22r {     background-position: -70px -31px; }  .jssora22l:hover {     background-position: -130px -31px; }  .jssora22r:hover {     background-position: -190px -31px; }  .jssora22l.jssora22ldn {     background-position: -250px -31px; }  .jssora22r.jssora22rdn {     background-position: -310px -31px; } 

js:

jquery(document).ready(function ($) {    var jssor_1_options = {     $autoplay: true,     $slideduration: 800,     $slideeasing: $jease$.$outquint,     $arrownavigatoroptions: {       $class: $jssorarrownavigator$,       $autocenter: 2     }   };    var jssor_1_slider = new $jssorslider$("slider1_container", jssor_1_options);    //responsive code begin   //you can remove responsive code if don't want slider scales while window resizing   function scaleslider() {     var refsize = jssor_1_slider.$elmt.parentnode.clientwidth;     if (refsize) {       refsize = math.min(refsize, 1920);       jssor_1_slider.$scalewidth(refsize);     }     else {       window.settimeout(scaleslider, 30);     }   }   scaleslider();   $(window).bind("load", scaleslider);   $(window).bind("resize", scaleslider);   $(window).bind("orientationchange", scaleslider); }); 

any ideas?