Question

我正在尝试使用jssor实现angularjs滑块。我已经可以看到显示的一些图像和所有缩略图。但我无法浏览图像。

这是因为以下错误阻止了任何进一步的js执行：

Error: prototype of 'thumbnavigator' not defined.
$JssorDebug$</this.$Fail@js/jssor/jssor.js:69:15
window.$JssorThumbnailNavigator$/<@js/jssor/jssor.slider.js:3607:17
$JssorDebug$</this.$Execute@js/jssor/jssor.js:92:13
window.$JssorThumbnailNavigator$@js/jssor/jssor.slider.js:3605:9
window.$JssorSlider$@js/jssor/jssor.slider.js:3018:35
slider_starter@js/jssor_config.js:78:33

有趣的是，有时错误未显示，滑块按预期工作。但总共占30％。所以一般来说代码应该没问题，但为什么它总是不起作用？

我刚刚从jssor中获取了示例代码并按如下方式使用它：

HTML：

<div id="slider_container">
        <div u="slides">
            <div ng-repeat="picture in pictures" on-finish-render="initSlider()">
            <img u="image" ng-src="{{picture.url}}"/>
            <img u="thumb" ng-src="{{picture.url}}"/>
        </div>
        </div>

        <!-- thumbnail navigator container -->
        <div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
            <!-- Thumbnail Item Skin Begin -->
            <div u="slides" style="cursor: default;">
                <div u="prototype" class="p">
                    <div class=w><div u="thumbnailtemplate" class="t"></div></div>
                    <div class=c></div>
                </div>
            </div>
        </div>
</div>

jssor_config.js：

slider_starter = function (containerId) {
            var _SlideshowTransitions = [
            ...];

            var options = {
                ...

                $ThumbnailNavigatorOptions: {    
                    $Class: $JssorThumbnailNavigator$,    
                    $ChanceToShow: 2,   
                    ...
                }
            };

            var jssor_slider = new $JssorSlider$(containerId, options);
};

angularjs控制器：

// @see http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished
app.directive('onFinishRender', function($timeout) {
    return {
        restrict : 'A',
        link : function(scope, element, attr) {
            if (scope.$last === true) {
                scope.$evalAsync(attr.onFinishRender);
            }
        }
    }
});

$scope.initSlider = function() {
    slider_starter('slider_container');
};

这里可能有什么问题？如上所述，div u="thumbnavigator"已定义且应该被找到，但事实并非如此。为什么呢？

更新：加载顺序为：

jquery
angular
angular-route
bootstrap

jssor
jssor.slider
jssor.js

controller

Jssor - 未定义'thumbnavigator'的原型？

0 个答案: