Current Slide Number

[size=“5”]I have many slides but got problem can’t find the current number of slide!
How to show current slide number? ex: ( 3 of 8 )
Thanks for any idea!

Here code:[/size]

<script type=“text/javascript” src=“jquery-1.7.1.min.js”></script>
<script type=“text/javascript”>
var currentPosition = 0;
var slideWidth = 560;
var slides = $(‘.slide’);
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$(‘#slidesContainer’).css(‘overflow’, ‘hidden’);

// Wrap all .slides with #slideInner div
.wrapAll(‘<div id=“slideInner”></div>’)
// Float left to display horizontally, readjust .slides width
‘float’ : ‘left’,
‘width’ : slideWidth

// Set #slideInner width equal to total width of all slides
$(‘#slideInner’).css(‘width’, slideWidth * numberOfSlides);

// Insert controls in the DOM
.prepend(‘<span class=“control” id=“leftControl”>Clicking moves left</span>’)
.append(‘<span class=“control” id=“rightControl”>Clicking moves right</span>’);

// Hide left arrow control on first load

// Create event listeners for .controls clicks
.bind(‘click’, function(){
// Determine new position
currentPosition = ($(this).attr(‘id’)==‘rightControl’) ? currentPosition+1 : currentPosition-1;

// Hide / show controls
// Move slideInner using margin-left
  'marginLeft' : slideWidth*(-currentPosition)


// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $(‘#leftControl’).hide() } else{ $(‘#leftControl’).show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $(‘#rightControl’).hide() } else{ $(‘#rightControl’).show() }

var CurrenPageId = document.getElementById(“CurrenPageId”);
CurrenPageId.innerHTML = “Page” + ??? + " ";

It seems like you have everything you need, just build a string with your position and numberOfSlides variables:

CurrenPageId.innerHTML = 'Page ' + (position + 1) + ' of ' + numberOfSlides;

I did this, but still not working…
something wrong?

var CurrenPageId = document.getElementById(“CurrenPageId”);
CurrenPageId.innerHTML = “page” + (position + 1) + “of” + numberOfSlides;

<span id=“CurrenPageId”>Page 1 of</span>

Could you post your HTML? Or, better yet, a jsFiddle that we could mess around with?

Well Bro!!!
here is example:

Ahh, figured it out: Those two lines where you get #CurrenPageId and update its innerHTML need to be moved into the “manageControls” function. I updated your jsFiddle so that it works now.

proper indentation ftw

Ohhhh work perfectly!!!
Thanks you!

Now if I want to sliding by reverse page ex: from last page to first page (5,4,3,2,1)
Thanks any idea!

I assume the only part you needed help with was getting the counter to display the right number (maybe you’ve already figured this out, even), and all you have to do is add a single line to your manageControls function; I’ve updated your jsFiddle again, so I think it now works the way you wanted.

Thanks your professional!!!