jssor 过渡生成器 - 如何将代码添加到现有滑块？

Question

JSSOR 真是太棒了！所以开发这个神奇工具的人应该非常非常感谢！

我的问题：我有一个滑块，默认情况下图片从左向右滑动。

以此为基础，我想创建具有不同过渡的滑块。因此，我使用了出色的 JSSOR 过渡生成器并创建了一些自定义过渡。

我复制了代码，现在我有一个问题：

我应该将该代码粘贴到哪里？

我的猜测是，它必须添加到该行之后的行中

var options = {

在下一个嵌套括号开始之前，对我来说是

$CaptionSliderOptions: {

这是正确的还是有新的转换代码要粘贴到另一个地方？

非常感谢任何帮助！

干杯， 约翰内斯

Answer 1

有两种过渡。

'slideshow transition' 是幻灯片级别的过渡，它从一张幻灯片播放到另一张幻灯片。 'caption transition' 字幕级别转换，它在幻灯片中播放字幕。

'slideshow transitions' 被指定为一个数组，例如var slideshow_transitions = [ { code1 }, { code2 }, { code3 } ];请参阅“examples-jquery\slider-with-slideshow.source.html”示例，

<script>
    jQuery(document).ready(function ($) {
        //Reference http://www.jssor.com/development/slider-with-slideshow.html
        //Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html

        var _SlideshowTransitions = [
        //Fade
        { $Duration: 1200, $Opacity: 2 }
        ];

        var options = {
            $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

    });
</script>

'caption transitions' 被指定为一个数组，并且每个转换都用名称指定。例如var caption_transitions = []; caption_transitions["transition1"] = { code1 };请参阅“examples-jquery\slider-with-caption.source.html”示例，

<script>
    //Reference http://www.jssor.com/development/slider-with-caption-jquery.html
    //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
    //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html

    jQuery(document).ready(function ($) {
        var _CaptionTransitions = [];
        _CaptionTransitions["L"] = { $Duration: 800, $FlyDirection: 1, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["R"] = { $Duration: 800, $FlyDirection: 2, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["T"] = { $Duration: 800, $FlyDirection: 4, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["B"] = { $Duration: 800, $FlyDirection: 8, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["TL"] = { $Duration: 800, $FlyDirection: 5, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["TR"] = { $Duration: 800, $FlyDirection: 6, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["BL"] = { $Duration: 800, $FlyDirection: 9, $Easing: $Jease$.$InCubic };
        _CaptionTransitions["BR"] = { $Duration: 800, $FlyDirection: 10, $Easing: $Jease$.$InCubic };

        _CaptionTransitions["WAVE|L"] = { $Duration: 1500, $FlyDirection: 5, $Easing: { $Left: $Jease$.$Linear, $Top: $Jease$.$OutWave }, $ScaleVertical: 0.4, $Round: { $Top: 2.5} };
        _CaptionTransitions["MCLIP|B"] = { $Duration: 600, $Clip: 8, $Move: true, $Easing: $Jease$.$OutExpo };

        var options = {
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
                $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    });
</script>