JSSOR'thumbnavigator'的错误原型未定义

时间:2015-03-04 11:44:19

标签: javascript jquery jssor

我正在尝试在我的页面上实现一个JSSOR滑块,但我仍然坚持使用拇指导航。一旦我向我的标记添加u="thumbnavigator",我就会收到以下错误:

Error: Error: prototype of 'thumbnavigator' not defined. Script: [...] Line: 69 Column: 14 StackTrace: Error: prototype of 'thumbnavigator' not defined.

定义应该足够而不是问题:

<div u="thumbnavigator" style="position:absolute; width:600px; height:120px;" class="slider-thumbs">
</div>

以下是我如何初始化Slider:

        var options = {
            $DragOrientation: 1,
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2
            },
            $ThumbnailNavigatorOptions:  {
                $Class: $JssorThumbnailNavigator$,           
                $ChanceToShow: 2,                              

                $Loop: 0,                                     
                $SpacingX: 3,                                  
                $SpacingY: 3,                                  
                $DisplayPieces: 4,                               
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,             
                    $ChanceToShow: 2,                              
                    $AutoCenter: 2,                                
                    $Steps: 3                                    
                }
            }
        };
        console.log($JssorThumbnailNavigator$);
        console.log($('#slider-main'));
        var jssor_slider1 = new $JssorSlider$("slider-main", options);

在我的控制台中给我以下内容,这对我来说是完全正确的:

function(elmt, options)
Object[div#slider-main.slider]

我的幻灯片标记中还有<img u="thumb" /><img u="image" />,它们都指向有效的图像资源(使用firebug进行检查)。

有人能指出我正确的方向吗?任何帮助表示赞赏:)

1 个答案:

答案 0 :(得分:0)

Jssor thumbnail导航器html代码看起来像,

<!-- ThumbnailNavigator Skin Begin -->
<div u="thumbnavigator" class="jssort07" style="position: absolute; width: 800px; height: 100px; left:0px; bottom: 0px;">
    <!-- Thumbnail Item Skin Begin -->
    <style>
        /* css here */
    </style>
    <div u="slides" style="cursor: move;">
        <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
            <div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
            <div class="o">
            </div>
        </div>
    </div>
    <!-- Thumbnail Item Skin End -->
</div>
<!-- ThumbnailNavigator Skin End -->

包中有一些缩略图导航器皮肤&#39;皮肤/缩略图 - * .source.html&#39;