How to put jssor slider count in caption - php

Question

I have a jssor slider working, including displaying captions. Each caption shows a title in the first line and a description in the lines below the title. I'm looking to add the slider count to the caption, so to the right of the title I would show, for example, "2 of 47".
Based on another post I found, I added the below code to the js:
function DisplayIndex() {
$("#displayIndex").text(jssor_slider2.$CurrentIndex() + 1 + " of " + jssor_slider2.$SlidesCount());
}
DisplayIndex();
jssor_slider2.$On($JssorSlider$.$EVT_PARK, DisplayIndex);
I also added the "<div id='displayIndex'" line to the php code, subordinate to caption div, as below:
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>";
The count appears, but is in the inner container rather than in the caption, so any full width picture overlays the count and the count is not visible.
How can I put the count into the caption itself?
Any assistance is much appreciated.

Answer 1

I found that you placed the displayIndex element inside a caption. You know, a caption should be a child element of a slide. It always moves along with the slide.
The more reasonable way is to make the displayIndex to be a static/fixed element.
A static/fixed element is an element parallel with every slide. It should be treated as a slide, but with u="any" attribute specified, it's no longer a slide, it will always stay where it should be.
<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>
Reference: http://www.jssor.com/development/slider-with-fixed-static-element.html