一页中有多个 Jssor 滑块，带有幻灯片计数器

Question

问题描述：

我在 Joomla2.5 系统中实现 Jssor 滑块。我将 Jssor 代码放在模板级别（自定义模板）内的两个文件中，我从模板的“index.php”链接到这两个文件：

一个。 'template.js' 我包含 jssor 代码（'no jquery' 选项、jssor.slider.min.js 和“jssor_slider1_starter = function (containerId) {...}”）

b. 'template.css' 我包含 css 的地方。

在 Joomla 文章中，我将滑块放在我想要的时间和位置。 好的。一切正常到这里。华丽。

我想要带有滑块计数器的滑块。在 Joomla CMS 中，根据文章通常呈现的多种方式，当然有可能多个 Jssor 滑块实例出现在一个页面中。我有它，计数器相互混淆。

我的作业：

在“jssor_slider1_starter”函数内部：

...
var jssor_slider1 = new $JssorSlider$(containerId, options);
function DisplayIndex() {$("#displayIndex").text(jssor_slider1.$CurrentIndex() + 1 + " / " + jssor_slider1.$SlidesCount());}
DisplayIndex();
jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayIndex);

在 Joomla 文章内，在滑块内：

<div id="displayIndex" data-u="any" class="index"></div>

注意：上面的位放在前面

<script>jssor_slider1_starter('slider_name');</script>

因为我希望计数器绝对位于滑块内部容器下方。

据我所知，问题在于页面中存在多个“displayIndex”id，这是不正常的。 所以我想，我可以从 'template.js' 中删除这一点：

function DisplayIndex() {$("#displayIndex").text(jssor_slider1.$CurrentIndex() + 1 + " / " + jssor_slider1.$SlidesCount());}
DisplayIndex();
jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayIndex);

并将其放在每个滑块中，例如：

<script>jssor_slider1_starter('This_slider');
function DisplayIndexThis_slider() {$("#displayIndexThis_slider").text(jssor_slider1.$CurrentIndex() + 1 + " / " + jssor_slider1.$SlidesCount());}
DisplayIndexThis_slider();
jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayIndexThis_slider);
</script>

我在这里杀死了那个东西。我摆弄了很多……但这似乎超出了我的能力。

Answer 1

工作代码（对于每个滑块实例）是：

<script>
slider_name_starter = function (containerId) {
var options={$ArrowNavigatorOptions: {$Class:$JssorArrowNavigator$,$ChanceToShow:2}};
var jssor_slider_name=new $JssorSlider$(containerId,options);
function DisplayIndex(){$("#" + containerId + "_Index").text(jssor_slider_name.$CurrentIndex() + 1 + " / " + jssor_slider_name.$SlidesCount());}
DisplayIndex();jssor_slider_name.$On($JssorSlider$.$EVT_PARK, DisplayIndex);};
</script>

<div class="slider" id="slider_name">

<!--Loading-screen-->...<!--Loading-screen-->

<!--container-->
<div data-u="slides" class="slides">

<!--slides-->...

</div><!--container-->

<!-- Arrows -->
<span data-u="arrowleft" class="jssora05l" style=""></span>
<span data-u="arrowright" class="jssora05r" style=""></span>

<!-- index -->
<div id="slider_name_Index" data-u="any" class=""></div>

<script>slider_name_starter('slider_name');</script>

</div>

Answer 2

感谢您的快速响应。我会说，尽管挣扎我没有成功，所以我粘贴了滑块的代码，希望能发现错误：

<script>This_slider_starter = function (containerId) {
var options = { };
var jssor_This_slider = new $JssorSlider$(containerId, options);
function DisplayIndex(){$("#" + containerId + "Index").text(jssor_This_slider.$CurrentIndex() + 1 + " of " + jssor_This_slider.$SlidesCount());}
DisplayIndex();
jssor_This_slider.$On($JssorSlider$.$EVT_PARK, DisplayIndex);
};
</script>

<div class="slider" id="This_slider">

<!--Loading-screen-->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; background-color: #000; top: 0px; left: 0px; width: 100%; height: 100%;">&nbsp;</div>
<div style="position: absolute; display: block; background: url('images/loading.gif') no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;">&nbsp;</div>
</div><!--Loading-screen-->

<!--container-->
<div data-u="slides" class="slides">

...

</div><!--container-->

<!-- Arrows -->
<span data-u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 450px; left: 0px;"></span>
<span data-u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 450px; right: 0px"></span>

<!-- index -->
<div id="This_slider_Index" data-u="any" class="index"></div>

<script>This_slider_starter('This_slider');</script>

</div>

Answer 3

还在挣扎。

我认为你犯了一个错误："#" + containerId + "Index" 必须变成"#" + containerId + "_Index"。

下面的代码使索引工作（容器外部或内部）：

<script>
This_slider_starter = function (containerId) {
var options = { };
var jssor_This_slider = new $JssorSlider$(containerId, options);
function DisplayIndex(){$("#" + containerId + "_Index").text(jssor_This_slider.$CurrentIndex() + 1 + " of " + jssor_This_slider.$SlidesCount());}
DisplayIndex();
jssor_This_slider.$On($JssorSlider$.$EVT_PARK, DisplayIndex);
};
</script>

<div class="slider" id="This_slider">

<!--container-->
<div data-u="slides" class="slides">

<!--slides-->
...

</div><!--container-->

<!-- Arrows -->
<span data-u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 450px; left: 0px;"></span>
<span data-u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 450px; right: 0px"></span>

<!-- index -->
<div id="This_slider_Index" data-u="any" class="index"></div>

<script>This_slider_starter('This_slider');</script>

</div>

问题：箭头不起作用。

Answer 4

<script>
    This_slider_starter = function (containerId) {
        var options = { };

        var jssor_slider1 = new $JssorSlider$(containerId, options);

        function DisplayIndex() {
            $("#" + containerId + "_Index").text(jssor_slider1.$CurrentIndex() + 1 + " of " + jssor_slider1.$SlidesCount());
        }

        DisplayIndex();
        jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayIndex);
    };
</script>

<script>
    That_slider_starter = function (containerId) {
        var options = { };

        var jssor_slider1 = new $JssorSlider$(containerId, options);

        function DisplayIndex() {
            $("#" + containerId + "_Index").text(jssor_slider1.$CurrentIndex() + 1 + " of " + jssor_slider1.$SlidesCount());
        }

        DisplayIndex();
        jssor_slider1.$On($JssorSlider$.$EVT_PARK, DisplayIndex);
    };
</script>

<div id="This_slider" ...>
    ...
    <div u="slides" ...>
        ...

        <div id="This_slider_Index" u="any" style="position: absolute; bottom: 10px; left: 10px; width: 100px; height: 26px;"></div>
    </div>
</div>
<script>
    This_slider_starter('This_slider');
</script>

<div id="That_slider" ...>
    ...
    <div u="slides" ...>
        ...

        <div id="That_slider_Index" u="any" style="position: absolute; bottom: 10px; left: 10px; width: 100px; height: 26px;"></div>
    </div>
</div>
<script>
    That_slider_starter('That_slider');
</script>