JSSOR transition is not working while autoplay

Question

Hi I have an issue while Autoplay is enable. During Autoplay no transition is toggled, images are simply exchanged - first disappears and second appears. I tried changing code and also CSS but it doent work. All I want is simple fade transition.

       var jssor_1_SlideshowTransitions = [{
                $Duration: 300,
                x: 0.3,
                $During: {
                    $Left: [0.3, 0.7]
                },
                $Easing: {
                    $Left: $Jease$.$InCubic,
                    $Opacity: $Jease$.$Linear
                },
                $Opacity: 2
            }
        ];

        var jssor_1_options = {
            $AutoPlay: 1,
            $FillMode: 5,
            $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
            },
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
            },
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $SpacingX: 5,
                $SpacingY: 5
            },
            $SlideDuration: 200,
            $Idle: 5000
        };

        jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        jssor_1_slider.$HWA = false;

Warning - I am using Ajax for loading images - after I load them I fire

jssor_1_slider.$ReloadSlides(imageList);

Could this be an issue ?

Answer 1

I checked your page, you used id to specify css rules for the slides element.

On jssor slider initialize, it will resort dom hierarchy and clone some nodes, in this manner, id of some element will be lost.

Please always use class name to specify css rules for elements inside jssor slider.

<style>
    .imageList {
        cursor: default;
        position: relative;
        top: 0px;
        left: 0px;
        width: 980px;
        height: 380px;
        overflow: hidden;
    }
</style>

<div data-u="slides" class="imageList" id="imageList">