2

我目前正在使用 Meteor.js

我想包括一个 jssor 幻灯片，第一次尝试就可以了。

但是当我想定义任何转换选项时，我在 jssor.slider.js 中有一个错误，并且幻灯片不再起作用。

这是我的代码：

HTML

<template name="slideshow">
<div class="max">
    <div id="slider_container">

        <!-- Slides Container -->
        <div class="slides" u="slides">
            <div>
                <img u="image" src="/assets/img/landscape/01.jpg" />
            </div>
            <div>
                <img u="image" src="/assets/img/landscape/02.jpg" />
            </div>
            <div>
                <img u="image" src="/assets/img/landscape/03.jpg" />
            </div>
        </div>

        <!-- Arrow Navigator-->
        <span u="arrowleft" class="arrow-left jssora01l"></span>
        <span u="arrowright" class="arrow-right jssora01r"></span>
    </div>
</div>
</template>

Javascript：

Template.slideshow.rendered = function() {
    var slideopt = [
    // Transition code copy/pasted from the transition tool viewer
{$Duration:1500,$Cols:2,$FlyDirection:1,$ChessMode:{$Column:3},$Easing: $Left:$JssorEasing$.$EaseInOutCubic},$ScaleHorizontal:0.5,$Opacity:2,$Brother:{$Duration:1500,$Opacity:2}}
    ];
    var options = {
        $AutoPlay: true ,
        $DragOrientation: 3,
        $SlideDuration: 800,
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $ChanceToShow: 2
        },
        /* When I add this, boom, it doesn't work anymore
        $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: slideopt
        }*/
    };
    var slideshow = new $JssorSlider$('slider_container', options);

    // Responsive stuff below
    function ScaleSlider() {
        var parentWidth = $('#slider_container').parent().width();
        if (parentWidth) {
            slideshow.$ScaleWidth(parentWidth);
        }
        else
            window.setTimeout(ScaleSlider, 30);
    }
    ScaleSlider();

    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
};

Less (CSS)：我想这没关系，因为幻灯片可以在没有过渡选项的情况下工作

这里是错误：

"Exception from Deps afterFlush function function: window.$JssorSlideshowRunner$@http://127.0.0.1:3000/client/lib/jquery-slider/js/jssor.slider.js?7bbd4c66d666261224052398f9c82a31f7062373:1132:13
n@http://127.0.0.1:3000/client/lib/jquery-slider/js/jssor.sliders.mini.js?0915ae0e4216734070b6d43ad8a305b01fc6ed6d:2:23801
Template.slideshow.rendered@http://127.0.0.1:3000/client/views/blocks/slideshow/slideshow.js?a806ae927323a52c662dd0ea50eba3d657f1794d:20:1
UI.Component.notifyParented/<@http://127.0.0.1:3000/packages/ui.js?9419ac08328918a04e7a49464a988d45f851e1b0:439:9
.flush@http://127.0.0.1:3000/packages/deps.js?4a82362ae66e863a1c1a8b0a5fec6f665e2038d1:348:13
"

我保留了以下 js 文件：

jssor.core.js
jssor.slider.js
jssor.sliders.mini.js
jssor.utils.js

但是如果我保留所有 js 文件，我会遇到同样的错误。

（我已经从 jquery-slider-master 结帐，我想使用 jssor WITH jquery）

4

1 回答 1

0

转换代码错误，请将 '$Easing: $Left' 替换为 '$Easing: { $Left'。请参阅下面的转换代码，

        var slideopt = [
            // Transition code copy/pasted from the transition tool viewer
            { $Duration: 1500, $Cols: 2, x: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InOutCubic },$ScaleHorizontal:0.5,$Opacity:2,$Brother:{$Duration:1500,$Opacity:2}}
        ];

你只需要'jssor.slider.min.js'。

于 2014-07-05T09:15:29.977 回答