無法弄清楚如何使用導航器與JSSOR滑塊

Question

對不起，但即使在網站上的所有幫助，我仍然無法讓導航器在我的頁面上工作。我有以下HTML：

<div id="bj3dd" style="left: 0px; top: 0px; width: 600px; height: 300px;"> 
    <div data-slides="" u="slides" style="width: 600px; height: 300px;"> 
     <div> 
      <img u="image" src="http://www.jssor.com/img/photography/002.jpg"> 
      <img u="thumb" src="http://www.jssor.com/img/photography/002.jpg" style="width:50px;height:50px;"> 
     </div> 
     <div> 
      <img u="image" src="http://www.jssor.com/img/photography/003.jpg"> 
      <img u="thumb" src="http://www.jssor.com/img/photography/003.jpg" style="width:50px;height:50px;"> 
     </div> 
     <div> 
      <img u="image" src="http://www.jssor.com/img/photography/004.jpg"> 
      <img u="thumb" src="http://www.jssor.com/img/photography/004.jpg" style="width:50px;height:50px;"> 
     </div> 
     <div> 
      <img u="image" src="http://www.jssor.com/img/photography/005.jpg"> 
      <img u="thumb" src="http://www.jssor.com/img/photography/005.jpg" style="width:50px;height:50px;"> 
     </div> 
    </div> 
    <span class="jssora03l" u="arrowleft"></span> 
    <span class="jssora03r" u="arrowright"></span> 
    <div class="jssort03" u="thumbnavigator" style="position: absolute; width: 600px; height: 60px; left: 0px; bottom: 0px;"></div> 
</div> 

用下面的JS代碼：

$(document).ready(function() { 

    var options = { 

     $AutoPlay: true,          
     $AutoPlaySteps: 1, 
     $AutoPlayInterval: 4000, 
     $DragOrientation: 1, 
     $ArrowKeyNavigation: true, 
     $ArrowNavigatorOptions: { 
      $Class: $JssorArrowNavigator$, 
      $ChanceToShow: 1, 
      $AutoCenter: 0, 
      $Steps: 1 
     }, 
     $ThumbnailNavigatorOptions: { 
      $Class: $JssorThumbnailNavigator$, 
      $ChanceToShow: 2, 
     } 

    }; 
    new $JssorSlider$('bj3dd', options); 
}); 

嘗試，因爲我可能，我不能讓導航工作，請把我從我的痛苦並告訴我我做錯了什麼！

Answer 1

<div id="bj3dd" style="left: 0px; top: 0px; width: 600px; height: 300px;"> 
    <div data-slides="" u="slides" style="width: 600px; height: 300px;"> 
     <div> 
      <img u="image" src="http://www.jssor.com/img/photography/002.jpg"> 
      <img u="thumb" src="http://www.jssor.com/img/photography/002.jpg" style="width:50px;height:50px;"> 
     </div> 
     <div> 
      <img u="image" src="http://www.jssor.com/img/photography/003.jpg"> 
      <img u="thumb" src="http://www.jssor.com/img/photography/003.jpg" style="width:50px;height:50px;"> 
     </div> 
     <div> 
      <img u="image" src="http://www.jssor.com/img/photography/004.jpg"> 
      <img u="thumb" src="http://www.jssor.com/img/photography/004.jpg" style="width:50px;height:50px;"> 
     </div> 
     <div> 
      <img u="image" src="http://www.jssor.com/img/photography/005.jpg"> 
      <img u="thumb" src="http://www.jssor.com/img/photography/005.jpg" style="width:50px;height:50px;"> 
     </div> 
    </div> 
    <!-- Arrow Navigator Skin Begin --> 
    <!-- Open 'skin\arrow-03.source.html' and copy arrow navigator skin here --> 
    <!-- Arrow Navigator Skin End --> 

    <!-- ThumbnailNavigator Skin Begin --> 
    <!-- Open 'skin\thumbnail-03.source.html' and copy thumbnail navigator skin here --> 
    <!-- ThumbnailNavigator Skin End --> 
</div>