Comments (9)
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.
from swipe.
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.
from swipe.
Does your console output any errors?
from swipe.
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.
from swipe.
Did you replace the variables in the snippet above with your proper context?
from swipe.
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).
from swipe.
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.
from swipe.
No problem, don't hesitate getting in touch if you need anything else! 😄
from swipe.
Good! Thank you, thank you, thank you! Good luck! :)
from swipe.
Related Issues (20)
- Zoom does not work HOT 1
- Add configurable selector for children to use as a slides HOT 1
- Recalculate widths without changing inline css transition duration HOT 9
- slide(index, duration) does not work HOT 2
- enhancement: add 3 missing props to React documentation HOT 2
- Each slide appears diagonally below the one before it HOT 5
- Question: Is there a way to make what is inside of swipe wrap also clickable? HOT 1
- method of judging amd may cause error:Cannot set property 'Swipe' of undefined
- Multiple Swipe instances? HOT 1
- Using {passive: true} may causes the problem of event conflict on Safari HOT 1
- overlapping slides HOT 2
- A few suggestions HOT 1
- Clicked ignored elements are prevented from default behavior
- Layout is broken if swipe widget is disabled
- react 版本的需要更新一下,升级到16.13.1,应该是16.8以后,componentWillReceiveProps 不建议使用了,等到17就正式不让使用了,麻烦更新一下。 HOT 1
- Layout jump after init HOT 2
- Flex direction row-reverse not working? HOT 1
- continuous为true且children个数为两个时显示有问题 HOT 1
- Desktop weirdness... HOT 1
- slide function directions HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swipe.