Pagination

[LADY-X]

How to add numbering? For example, 3/7
Thank you!

[loup-brun]

You'd have to implement this feature in your UI yourself. Swipe exposes a simple API that your can use.

You could create a function, say updateNumbering(), that would update your piece of interface with the current slide index. A simple example:

function updateNumbering(swipeInstance, elem) {
  // reference to the Swipe API
  var currentIndex = swipeInstance.getPos();
  // now populate your UI however you want with the new index
  elem.innerHTML = currentIndex;
}

Then you would tie your update function with your Swipe instance. Note that the function declaration may be placed below your instantiation code.

Assuming you have mySwipe set as a reference to your Swipe instance and myNumberingElement set as a reference to your DOM element containing the numbering.

// 1) run at slide change
window.mySwipe = new Swipe(swipeElem, {
  // options...
  transitionEnd: function() {
    updateNumbering(mySwipe, myNumberingElement);
  }
}

// 2) run on page load
// note that you must first define `mySwipe`, above the line below
updateNumbering(mySwipe, myNumberingElement);

Lastly, if you want to add the total (e.g. the number 7 in 3/7), you could also hook up the getNumSlides() function from the Swipe API in a similar fashion.

[LADY-X]

I beg you to help me, I myself can not. I insert this code, but the slider stops working. I apologize for the broken English, I do not know much English. Thank you for your help.

[loup-brun]

Does your console output any errors?

[LADY-X]

No, no console errors. But when I insert the code, the slider does not show, just empty space. Please tell me you could put somewhere modified code? I will be very grateful.

[loup-brun]

Did you replace the variables in the snippet above with your proper context?

[loup-brun]

I wrote a pen with a working example using the demo as a test case. It should work, as long as you implement it in your project (you can't just copy-paste the snippet above).

I'll close this for now as it isn't really an issue, but a user question (which could be asked on a user forum like Stack Overflow for example).

[LADY-X]

Excuse me for my long answer. Yes, I did, I have all happened because of you. You helped me a lot. Thank you very much. Wish you luck. Sorry for my agliyskom, I do not know much English. I'm from Russia. And thank you for your patience, for your help and for your kindness.

[loup-brun]

No problem, don't hesitate getting in touch if you need anything else! 😄

[LADY-X]

Good! Thank you, thank you, thank you! Good luck! :)