Jssor - прототип большого пальца не определен?

Я пытаюсь реализовать 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://stackru.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

0 ответов

Другие вопросы по тегам