CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

Showing the index of the current slide from Total #590

Closed OrangeWacko closed 11 years ago

OrangeWacko commented 11 years ago

How would it be possible to add this to the slider, as description, not necessarily as navigation:

For example, my slides are:

<ul>
     <li>Slide 1 Content</li>
     <li>Slide 2 Content</li>
     <li>Slide 3 Content</li>
</ul>

so, what I want is to have a description below that shows on which slide number you are on from the total:

For 1st slide example: " 1 out of 3"

For 2nd slide example: " 2 out of 3"

etc.

What would be the way to achieve this?

Thanks!

OrangeWacko commented 11 years ago

Anyways, I wrote this and it seems to work:

jQuery('.timeline_container ul').anythingSlider({
      onSlideComplete: function()
        {
            var slideIndex = jQuery('.timeline_container ul').data('AnythingSlider').currentPage;
            jQuery('#slide-id').text(slideIndex);
        }
    });
var slideTotal = jQuery('.timeline_container ul').data('AnythingSlider').pages;
jQuery('#slide-total').text(slideTotal);

/////// Outputs: 1 of 4, following the index of the slide you are on.

I think this can be closed :) Unless there are better ways ot do it.