I have a Jssor slider and I want to create an animation for the first slide. My goal is to make two images come from the sides and merge in the center.
I tried using a div for each image with a caption, and it works well. However, the second image starts moving only after the first one has reached the center. I would like them to move simultaneously. How can I achieve that?
Here is the option in my JavaScript file:
var options = {
$FillMode: 2,
$AutoPlay: false,
$AutoPlayInterval: 4000,
$PauseOnHover: 1,
$ArrowKeyNavigation: true,
$SlideEasing: $JssorEasing$.$EaseOutQuint,
$SlideDuration: 800,
$MinDragOffsetToSlide: 20,
$SlideSpacing: 0,
$DisplayPieces: 1,
$ParkingPosition: 0,
$UISearchMode: 1,
$PlayOrientation: 1,
$DragOrientation: 1,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$AutoCenter: 0,
$Steps: 1,
$Lanes: 1,
$SpacingX: 8,
$SpacingY: 8,
$Orientation: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$AutoCenter: 2,
$Steps: 1
}
};