Question

我目前正在使用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）

Answer 1

转换代码错误，请更换＆＃39; $ Easing：$ Left＆＃39; ＆＃39; $ Easing：{$ Left＆＃39;。请参阅下面的转换代码，

        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}}
        ];

你需要＆＃39; jssor.slider.min.js＆＃39;仅

带有Meteor的JSSOR Slider：无法定义任何转换选项

1 个答案: