我已经设置了滑块，我希望有两个标题：一个应该从左侧滑入并停留在图像的左侧;第二个应该从右侧滑入并停留在图像的右侧。但是，如果我尝试将第二个标题的left: 0更改为right: 0，则会破坏滑块。图像全部拉伸并停止工作。
有没有办法将标题贴在右侧？
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>
答案 0 :(得分：0)
对于字幕元素，Jssor Slider会识别“＆＃39; top＆＃39;，＆＃39; left＆＃39;而不是＆＃39;底部＆＃39;，＆＃39;右＆＃39;。
请替换＆＃39;右：0px＆＃39;左边：1570px＆＃39;然后