I have the slider all set up, and I want to have two captions: one should slide in from the left and stay on the left side of the image; the second one should slide in from the right and stay on the right side of the image. However, if I try changing the left: 0 of the second caption to right: 0 it breaks the slider. The image becomes all stretched and stops working.
Is there a way to stick the caption to the right side?
jQuery(document).ready(function ($) {
$('.menu').dropit({
action: 'mouseover'
});
action: 'hover';
var _SlideshowTransitions = [
{$Duration:3000,$Opacity:2}
];
var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 800, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["R"] = { $Duration: 800, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["T"] = { $Duration: 800, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["B"] = { $Duration: 800, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["TL"] = { $Duration: 800, x: 0.6, y: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["TR"] = { $Duration: 800, x: -0.6, y: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["BL"] = { $Duration: 800, x: 0.6, y: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["BR"] = { $Duration: 800, x: -0.6, y: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["WAVE|L"] = { $Duration: 1500, x: 0.6, y: 0.3, $Easing: { $Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseInWave }, $Opacity: 2, $Round: { $Top: 2.5} };
_CaptionTransitions["MCLIP|B"] = { $Duration: 600, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo };
var options = {
$AutoPlay: true,
$FillMode: 2,
$SlideshowOptions: {
$SlideWidth: 1920,
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
},
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 1, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
},
$CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption
$Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
$CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
$PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
$PlayOutMode: 0 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1920px; height: 1080px; margin: auto; overflow: hidden;">
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1920px; height: 600px; margin: 0;">
<div style="float: right;">
<img u="image" src="images/slider03.jpg" />
<div u="caption" t="L" t2="NO" style="position: absolute; top: 450px; left: 0px; width: 350px; height: 40px; background-color: #ff6c00; color: white; font-size: 24px; text-align: right; padding-right: 20px; padding-top: 10px;"><a href="project.php" style="color: white;">Click to view project</a></div>
<div u="caption" t="R" t2="NO" style="position: absolute; top: 450px; right: 0px; width: 350px; height: 40px; background-color: #ff6c00; color: white; font-size: 24px; text-align: right; padding-right: 20px; padding-top: 10px;"><a href="project.php" style="color: white;">TREE HOUSES</a></div>
</div>
<div><img u="image" src="images/slider01.jpg" /></div>
<div><img u="image" src="images/slider02.jpg" /></div>
</div>
</div>
For caption element, Jssor Slider recognizes 'top', 'left' instead of 'bottom', 'right'.
Please replace 'right: 0px' with 'left: 1570px' then.