项目符号导航中的 JSSOR 滑块错误

jssor slider error in bullet navigation

本文关键字：错误 JSSOR 符号 导航 项目      更新时间：2023-09-26

嗨，我使用 JSSOR 滑块在 eBay 模板中制作滑块，这是我第一次使用它。 所以我只是在当地练习。 滑块工作正常，但是当我添加项目符号导航器时，它显示以下错误

Uncaught Error: Navigator item prototype not defined.

这是我到目前为止的代码...

 <script src="jssor.js"></script>
  <script src="jssor.slider.js"></script>
  <script>
      jssor_slider1_starter = function (containerId) {
       var options = {
           $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$,
            $ChanceToShow: 2
        }
    };
    var jssor_slider1 = new $JssorSlider$(containerId, options);
  };
</script>
</head>
 <body>
   <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height:   300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="blue.jpg" /></div>
        <div><img u="image" src="purple.jpg" /></div>
        <div><img u="image" src="red.jpg" /></div>
    </div>
  <!--navication bullets-->
    <div u="navigator" class="jssorb01">
      1
   </div>
    <div u="navigator" class="jssorb01">
     2
    </div>
    <div u="navigator" class="jssorb01">
      3
    </div>
      <!--/navigation bullets-->
      <!-- Trigger -->
      <script>jssor_slider1_starter('slider1_container');</script>
     </div>

并请举例说明如何在eBay列表模板中使用它...

请下载 jssor.slider.fullpack.zip，解压缩并找到"skin''bullet-01.source.html"。

子弹导航器皮肤看起来像，

<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 01 -->
<style>
    /*
    .jssorb01 div           (normal)
    .jssorb01 div:hover     (normal mouseover)
    .jssorb01 .av           (active)
    .jssorb01 .av:hover     (active mouseover)
    .jssorb01 .dn           (mousedown)
    */
    .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av
    {
        filter: alpha(opacity=70);
        opacity: .7;
        overflow:hidden;
        cursor: pointer;
        border: #000 1px solid;
    }
    .jssorb01 div { background-color: gray; }
    .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
    .jssorb01 .av { background-color: #fff; }
    .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
    <!-- bullet navigator item prototype -->
    <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
相关文章：