如何将 jssor 滑块计数放在标题中

Question

我有一个 jssor 滑块正在工作，包括显示标题。每个标题在第一行显示一个标题，在标题下方的行中显示一个描述。我希望将滑块计数添加到标题中，因此我将在标题右侧显示，例如“2 of 47”。 根据我发现的另一篇文章，我在 js 中添加了以下代码：

function DisplayIndex() {
$("#displayIndex").text(jssor_slider2.$CurrentIndex() + 1 + " of " + jssor_slider2.$SlidesCount());
}

DisplayIndex();
jssor_slider2.$On($JssorSlider$.$EVT_PARK, DisplayIndex);

我还在 php 代码中添加了 "<div id='displayIndex'" 行，从属于标题 div，如下所示：

echo "<div class='caption2_text'>";
echo "<h1>$title</h1>";
echo "<p>$desc</p>";
echo "<div id='displayIndex' u='any' style='position: absolute; top: 10px; left: 790px; width: 100px; height: 26px;'></div>";
echo "</div>";

计数出现，但在内部容器中而不是在标题中，因此任何全宽图片都会覆盖计数并且计数不可见。 如何将计数放入标题本身？ 非常感谢任何帮助。

Answer 1

我发现您将 displayIndex 元素放在了标题中。你知道，标题应该是幻灯片的子元素。它总是随着幻灯片一起移动。

更合理的方法是让displayIndex成为一个静态/固定元素。

静态/固定元素是与每张幻灯片平行的元素。它应该被视为一张幻灯片，但是指定了u="any" 属性，它不再是一张幻灯片，它会一直停留在它应该在的位置。

<div u="slides">
    <div><!-- slide 1 --></div>
    <div><!-- slide 2 --></div>
    <div id='displayIndex' u='any' style='position: absolute; top: 10px; left: 790px; width: 100px; height: 26px;'>
        <!-- this is a static element -->
    </div>
</div>

参考：http://www.jssor.com/development/slider-with-fixed-static-element.html