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


How to put jssor slider count in caption

我有一个jssor滑块在工作,包括显示标题。每个标题在第一行中显示一个标题,在标题下的行中显示描述。我想在标题中添加滑块计数,所以在标题的右边,我会显示,例如,"47中的2"。根据我发现的另一篇帖子,我在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'"行,从属于captiondiv,如下所示:

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

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

我发现您将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