如何在JSSOR中将标题对齐到图像的右侧？

Question

我已经设置了滑块，我希望有两个标题：一个应该从左侧滑入并停留在图像的左侧;第二个应该从右侧滑入并停留在图像的右侧。但是，如果我尝试将第二个标题的left: 0更改为right: 0，则会破坏滑块。图像全部拉伸并停止工作。

有没有办法将标题贴在右侧？

的Javascript

        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);
    });

HTML

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

Answer 1

对于字幕元素，Jssor Slider会识别“＆＃39; top＆＃39;，＆＃39; left＆＃39;而不是＆＃39;底部＆＃39;，＆＃39;右＆＃39;。

请替换＆＃39;右：0px＆＃39;左边：1570px＆＃39;然后