Total slides counter in callbacks demo?

[o-l-e]

Hi,

i am trying to figure out how to calculate the total amount of slides in your callbacks example (http://slidesjs.com/examples/callbacks/).

The number counter is great, but your demo uses a hardcoded total amount of slides (..of 4)

Basically i am trying to achieve this automatically:

    1 of 4 slides

Could you point me in the right direction please? This is how i would start:

Markup:

    <div id="slides">
        <img src="img/01.jpg" />
        <img src="img/02.jpg" />
        <img src="img/03.jpg" />
        <img src="img/04.jpg" />
    </div>
    <span class="slidesjs-slide-number">1</span> of <span class="slidesjs-slide-total">?</span>

Document ready:

    $('#slides').slidesjs({
        callback: {
            loaded: function(number) {
                $('.slidesjs-slide-number').text(number); // Show start slide                               
            }, // Passes start slide number
            start: function() {}, // Passes slide number at start of animation
            complete: function(number) {
                // Change slide number on animation complete
                $('.slidesjs-slide-number').text(number);
            } // Passes slide number at end of animation
        }

    });

Now where and how would i get the slider to calculate the total amount of slides and change the text "?" to "4" in the .slidesjs-slide-total span?

Thanks for any help on this, and keep up the good work :)

[nathansearles]

You could just do something like this:

$("#slides img").length

[o-l-e]

Hi,

so what i ended up doing was this right after the slides init:

      $(".slidesjs-slide-index").text($(".slidesjs-slide").length);

I specified the #slides div at first, as some of the slides contain text not just images + the script adds two more divs inside the #slides, so i used .slidesjs.slide instead.

So for all you others out there wanting to achieve the same:

Markup:

<div id="slides">
    <img src="img/01.jpg" />
    <img src="img/02.jpg" />
    <img src="img/03.jpg" />
    <img src="img/04.jpg" />
</div>
<span class="slidesjs-slide-number">1</span> of <span class="slidesjs-slide-total">?</span>

Document ready:

$('#slides').slidesjs({
    callback: {
        loaded: function(number) {
            $('.slidesjs-slide-number').text(number); // Show start slide                               
        }, // Passes start slide number
        start: function() {}, // Passes slide number at start of animation
        complete: function(number) {
            // Change slide number on animation complete
            $('.slidesjs-slide-number').text(number);
        } // Passes slide number at end of animation
    }

});

// add the total amount of .slidesjs-slide to the span.slidesjs-slide-index
$(".slidesjs-slide-index").text($(".slidesjs-slide").length);

Let me know if there is a better way to achieve the same :)

Thanks