带有动态 $Align 的 jssor

Question

是否可以通过某种方式更改 $Align 运行时？

我有一个内容容器（可以说宽度：1000 像素），其 margin-left 和 -right 设置为自动。所以容器居中。滑块的容器有 100%，幻灯片的宽度设置为 1000px。我现在想要的是活动幻灯片始终位于中间（如内容容器），其他幻灯片位于其左右。所以我唯一的想法是每次 window 调整大小时在运行时重置 $Align。

这有可能吗？

我目前的选择：

var initialmargin = parseInt($("#page").css("margin-left"));

         var options = {
                $AutoPlay: false,

                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false

                $ArrowKeyNavigation: true,                          //Allows arrow key to navigate or not
                $SlideWidth: 870,                                   //[Optional] Width of every slide in pixels, the default is width of 'slides' container
                $SlideHeight: 300,                                  //[Optional] Height of every slide in pixels, the default is width of 'slides' container
                $SlideSpacing: 30,                                  //Space between each slide in pixels
                $Cols: 2,                                  //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $Align: initialmargin,                                //The offset position to park slide (this options applys only when slideshow disabled).

                $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    //$AutoCenter: 2,                                 //[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
                }
            };

如您所见，我使用#page 的左边距来初始化$Align。现在我想将此值更改为：

$(window).resize(function() {
  initialmargin = parseInt($("#page").css("margin-left"));
  //set initialmargin as new $Align
});

Answer 1

没有动态设置 $Align 的选项。您可以将滑块放在包装器中以使其自动居中。

<div style="position: relative; width: 100%; background-color: #003399; overflow: hidden;">
    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
        <div id="slider1_container" style="position: relative; margin: 0 auto;...">
            ...
        </div>
    </div>
</div>

参考：http://www.jssor.com/testcase/auto-center-slider-with-no-scale.source.html

带有动态 $Align 的 jssor

jssor with dynamic $Align

css

jquery

slider

jssor