Search code examples
meteorsliderslideshowjssor

JSSOR Slider with Meteor: Cannot define any transition option

I'm currently working with Meteor.js

I want to include a jssor slideshow, at the first try all it's okay.

But when I want to define any transition option, I have an error in jssor.slider.js and the slideshow doesn't work anymore.

Here is my code:

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): I guess it's okay because the slideshow works without the transition options

And here the error:

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

I have keept the following js files:

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

But I have the same errors if I keep all js files.

(I've checkout from jquery-slider-master and I want to use the jssor WITH jquery)

Solution

  • Transition code is wrong, please replace '$Easing: $Left' with '$Easing: { $Left'. See transition code below,

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

    You need 'jssor.slider.min.js' only.