Question

我有一些像常规演示这样的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>

请注意，容器高度比滑动高度大88px。这是为缩略图导航器分配的空间。

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

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

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

我知道文档提到箭头在容器中居中，但通常你想要的是让它们在SLIDE中居中。

如何将箭头置于幻灯片中心？似乎我不能将箭头SPAN移动到幻灯片DIV中。这可能吗？

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

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

1 个答案: