JSSOR Error prototype of 'thumbnavigator' not defined

Question

I'm trying to implement a JSSOR slider to my page but i'm stuck with the thumbs navigation. I keep getting the following error once i add an u="thumbnavigator" to my markup:

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

The definition should be sufficient and not the Problem:

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

Here's how i initialize the 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);

Giving me the following in my console, which looks completely right to me:

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

Also i have an <img u="thumb" /> as well as an <img u="image" /> in my slides markup which both point to valid image resources (checked with firebug).

Can some point me to right direction here? Any help appreciated :)

Answer 1

Jssor thumbnail navigator html code looks like,

<!-- 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 -->

And there are some thumbnail navigator skins in the package 'skin/thumbnail-*.source.html'