CODEWITHSUNDEEP
sliderjssor
Luna84
Luna84

Reputation: 147

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

Upvotes: 2

Views: 1516

Answers (1)

jssor
jssor

Reputation: 6985

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

Upvotes: 2

Related Questions