Как поместить количество слайдеров jssor в заголовок

Question

Как поместить количество слайдеров jssor в заголовок

У меня работает слайдер jssor, включая отображение подписей. Каждый заголовок показывает заголовок в первой строке и описание в строках под заголовком. Я рассчитываю добавить счетчик ползунков к заголовку, поэтому справа от заголовка я бы показал, например, «2 из 47».
Основываясь на другом сообщении, которое я нашел, я добавил следующий код в js:

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

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

Я также добавил "<div id='displayIndex'" строка к коду php, подчиненная заголовку 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>";

Счетчик отображается, но находится во внутреннем контейнере, а не в заголовке, поэтому любое полноразмерное изображение накладывается на счетчик, а счет не виден.
Как я могу поставить счет в саму подпись?
Любая помощь очень ценится.

-1

jssor php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я обнаружил, что вы разместили 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

0