I am currently working on a slideshow with 3 caption-only slides. Here is the code snippet:
<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>
Occasionally, when the page loads or on slower mobile devices, all three captions may briefly overlap before the slideshow starts to play.
Here is the 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);
});
Has anyone else encountered this issue? Is there a way to hide all captions until the Jssor slides are fully loaded and ready to play?
Thank you for any assistance.