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