Search code examples
sliderjssor

Jssor Slider count the slides/images

I would like to show the slide count like "2 of 14", "3 of 14", ..., on jssor slider (http://www.jssor.com/demos/simple-fade-slideshow.html). (as the slider moves with slides)

Is there a way that i can make this work? Thx in advance

Solution

  • 2 steps to go,

    1. Add static element (where to display index) in 'slides' container.

      <!-- Slides Container -->
<div u="slides" ...>
    ...

    <div id="displayIndex" u="any" style="position: absolute; bottom: 10px; left: 10px; width: 100px; height: 26px;"></div>
</div>

    2. Display index using javascript call.

          var jssor_slider1 = new $JssorSlider$(...;

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

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

    See http://www.jssor.com/testcase/slider-display-index.source.html