Html - Jssor Arrow навигатор не показывает вверх

Question

Вот мой слайдер коды расслоения плотного:

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); 

}); 

И 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 работает отлично. Может, я пропустил что-то или что-то еще; Что не так с моим кодом? Его просто скопировано: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html

Answer 1

Код работает в моем браузере.

Там может быть несколько причин:

1 Убедитесь, что вы имеете изображение в (/ IMG) папку (a09.png).

2 Измените свой путь к изображению с url (../ img/a09.png) на url (img/a09.png), чтобы увидеть, будет ли отображаться ваше изображение стрелки.

3- Расположение изображений может потребоваться корректировка в зависимости от размера вашего контейнера/фотографии. Похоже, что это полноэкранный слайдер, но независимо от того, что мои фотографии меньше, появился навигатор справа и слева.