JSSOR переход не работает во время автозапуска - PullRequest
Новая
       20

JSSOR переход не работает во время автозапуска

0 голосов
/ 26 января 2019

Привет, у меня проблема при включенном автозапуске. Во время автозапуска переход не переключается, изображения просто обмениваются - первый исчезает, а второй появляется. Я пытался изменить код, а также CSS, но это сработало. Все, что я хочу, - это простой переход замирание. 

       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;

Предупреждение - я использую Ajax для загрузки изображений - после загрузки я запускаю 

jssor_1_slider.$ReloadSlides(imageList);

Может ли это быть проблемой?

1 Ответ

0 голосов
/ 28 января 2019

Я проверил вашу страницу, вы использовали id, чтобы указать правила CSS для элемента slides.

При инициализации ползунка jssor он будет использовать иерархию dom и клонировать некоторые узлы, таким образом, id некоторого элемента будет потеряно.

Пожалуйста, всегда используйте class name для указания правил css для элементов внутри ползунка jssor. 

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