Jssor Slider: Captions overlap for a short time before slideshow starts

Question

I have a simple slideshow of 3 slides caption-only, as follows:

<div id="sliderHeader_container" style="position: relative; width: 965px; height: 85px;">

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:965px; height:85px; overflow: hidden;">
        <!-- Slide -->
        <div>
            <div u="caption" t="L|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 13px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 19px; line-height: 25px; text-align: center;">
                    CAPTION 1
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div>
            <div u="caption" t="R|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 0px; left: 220px; width: 965px; height: 85px; color: Black; font-size: 16px; line-height: 17px; text-align: left;">
                    CAPTION 2
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div>
            <div u="caption" t="SPACESHIP|LB" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 15px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 18px; line-height: 20px; text-align: center;">
                    CAPTION 3
                </div>
            </div>
        </div>
    </div>
</div>

Sometimes (usually when page is loading for the first time, or on slow mobile devices) all the three captions are displayed together (overlap) for a short time (less then 1 second). Afterward, the slideshow starts as expected.

Here is my initialization code:

jQuery(document).ready(function ($) {
        var _CaptionTransitions = [];
        _CaptionTransitions["L|EP"] = {$Duration:1200,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutExpo},$ScaleHorizontal:0.6,$Opacity:2};
        _CaptionTransitions["R|EP"] = {$Duration:1200,$FlyDirection:2,$Easing:{$Left:$JssorEasing$.$EaseInOutExpo},$ScaleHorizontal:0.6,$Opacity:2};
        _CaptionTransitions["SPACESHIP|LB"] = {$Duration:1200,$Zoom:3,$Rotate:-0.1,$FlyDirection:9,$Easing:{$Left:$JssorEasing$.$EaseInQuint,$Top:$JssorEasing$.$EaseInWave,$Opacity:$JssorEasing$.$EaseInQuint},$ScaleHorizontal:1,$ScaleVertical:0.1,$Opacity:2};

        var options = {
            $AutoPlay: true,
            $DragOrientation: 1,
            $SlideDuration: 0,
            $AutoPlayInterval: 10000,
            $CaptionSliderOptions: {
                $Class: $JssorCaptionSlider$,
                $CaptionTransitions: _CaptionTransitions,
                $PlayInMode: 1,
                $PlayOutMode: 3
            }
        };

        var jssor_slider_header = new $JssorSlider$("sliderHeader_container", options);
    });

Anyone has experienced the same behavior? I'm wondering if there a way to hide all the captions until the Jssor slides are ready to start.

Thanks in advance.

Answer 1

It looks as you stated while page is loading. You can use no jquery version to run jssor slider immediately without waiting for loading.

Or you can show only one slide and hide (style="display: none;") other slides at the beginning.

<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:965px; height:85px; overflow: hidden;">
    <!-- Slide -->
    <div>
        <div u="caption" t="L|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 13px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 19px; line-height: 25px; text-align: center;">
                CAPTION 1
            </div>
        </div>
    </div>
    <!-- Slide -->
    <div style="display: none;">
        <div u="caption" t="R|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 0px; left: 220px; width: 965px; height: 85px; color: Black; font-size: 16px; line-height: 17px; text-align: left;">
                CAPTION 2
            </div>
        </div>
    </div>
    <!-- Slide -->
    <div style="display: none;">
        <div u="caption" t="SPACESHIP|LB" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 15px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 18px; line-height: 20px; text-align: center;">
                CAPTION 3
            </div>
        </div>
    </div>
</div>