如何自动居中 JSSOR 箭头以便考虑缩略图行？答案

【问题标题】：How to auto center JSSOR arrow so that thumbnail row is taken into account?如何自动居中 JSSOR 箭头以便考虑缩略图行？
【发布时间】：2015-04-11 10:33:28
【问题描述】：

我有一些像常规演示这样的 JSSOR 代码...

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 488px;">
    <!-- Slides -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 400px;" >
        <div>
            <img u="image" ... />
            <img u="thumb" ... />
        </div>
        <div>
            <img u="image" ... />
            <img u="thumb" ... />
        </div>
    </div>

    <!-- Arrow Left -->
    <span u="arrowleft" class="jssoral" style="left: 8px;"></span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssorar" style="right: 8px;"></span>

    <!-- thumbnail navigator -->
    <div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
        ...
    </div>
</div>

请注意，容器高度比幻灯片高度大 88 像素。这是为缩略图导航器分配的空间。

在我的 JavaScript 中，我在箭头上指定了 AutoCenter：

$ArrowNavigatorOptions: {
    $Class: $JssorArrowNavigator$,
    $ChanceToShow: 2,
    $AutoCenter: 2,
    $Steps: 1
}

但是发生的情况是箭头在整个 jssor 容器中垂直居中，而不是在幻灯片本身中。

我知道文档提到箭头在其容器中居中，但通常您希望它们在幻灯片中居中。

如何使幻灯片中的箭头居中？似乎我无法将箭头 SPAN 移动到幻灯片 DIV 中。这可能吗？

【问题讨论】：

标签： javascript slideshow jssor

【解决方案1】：

请禁用自动中心 ($AutoCenter: 0)，

$ArrowNavigatorOptions: {
    $Class: $JssorArrowNavigator$,
    $ChanceToShow: 2,
    $AutoCenter: 0,
    $Steps: 1
}

然后你可以手动调整位置（top: 175px;），

<!-- Arrow Left -->
<span u="arrowleft" class="jssoral" style="top: 175px; left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssorar" style="top: 175px; right: 8px;"></span>

【讨论】：