Question

问题描述：

我在Joomla2.5系统中实现了Jssor滑块。我把Jssor代码放在模板级别（自定义模板）里面的两个文件中，我从模板的'index.php'链接：

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

湾'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_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>

Answer 3

感谢您惊人的快速回复。我会说，尽管我没有成功，但我粘贴滑块的代码希望发现错误：

<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 4

还在苦苦挣扎。

我认为你犯了一个错误："#" + 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>

问题：箭头不起作用。

多个Jssor滑块在一个页面中，带有滑动计数器

4 个答案: