jssor滑块不同的过渡

Question

我有 5 张不同的幻灯片，前四张幻灯片具有相同的过渡，只有最后一张幻灯片应该具有不同的过渡。 我已经在 _SlideshowTransitions 数组中定义了过渡，如下所示：

var _SlideshowTransitions = [

    {$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}},
    {$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}},
    {$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}},
    {$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}},
    {$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2}

];

只要您不使用导航箭头或项目符号，效果就很好！如何将一种不同的过渡分配给一张特殊的幻灯片？

提前致谢 京东

Answer 1

您可以随时使用api$SetSlideshowTransitions动态设置幻灯片过渡。

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

function SetSlideshowTransition() {
    switch (jssor_slider1.$CurrentIndex()) {
        case 3:
            jssor_slider1.$SetSlideshowTransitions([{$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2}]);
            break;
         default:
            jssor_slider1.$SetSlideshowTransitions([{$Duration:1000,$Opacity:2,$Brother:{$Duration:800,$Opacity:2}}]);
            break;
    }
}

jssor_slider1.$On($JssorSlider$.$EVT_PARK, SetSlideshowTransition);