I need to change page according to given page number dynamically
you can do this using scrollBy(index)
How explain it
Sure,
So you need to add a ref to your swiper component (https://facebook.github.io/react/docs/more-about-refs.html).
Something like, <Swiper ref={(swiper) => {this._swiper = swiper;}}>--views--</Swiper>
Then you can use this._swiper.scrollBy(1), and it will scroll forward by 1. If you use this._swiper.scrollBy(-1) it will scroll back by 1.
Also, you should use the initial index property <Swiper index={1}... to dynamically set the starting point for your Swiper.
It's not working
Actual I need when change my index state then show the page according to my index state
Is it possible when change state then re-render swipper component
Currently, thats not how the component works, the index property only sets the initial state - it does not command the current index.
When the Swiper component mounts, whatever the value of the index property is, is where the swiper will start - so if you re-render it with a new index, it will certainly change.
That said, you're better off calculating the index and using scrollBy() as mentioned earlier.
If you're having trouble using your ref, it probably means you're trying to access it before the component has finished mounting / rendering - and therefore isn't available yet.
To work around this, you should use a timeout, or placeholder value somewhere else so you can access the ref. I'm not sure if this is the correct way to do this - would love to hear input from anyone else on the matter (but google hasn't shown be a better way of dealing with it).
it did work for me . @uc-asa can you post the code.
hey @getnashty , I'm having a problem with the index in Swiper. I have a list of thumbnails and when I click in one of the items I want to open the Swiper with this image as initial. I'm setting the index index={this.state.clickedThumbnail} but its only working on iOs, dont know whats happening on android. Any idea?
Most helpful comment
Sure,
So you need to add a ref to your swiper component (https://facebook.github.io/react/docs/more-about-refs.html).
Something like,
<Swiper ref={(swiper) => {this._swiper = swiper;}}>--views--</Swiper>Then you can use
this._swiper.scrollBy(1), and it will scroll forward by 1. If you usethis._swiper.scrollBy(-1)it will scroll back by 1.Also, you should use the initial index property
<Swiper index={1}...to dynamically set the starting point for your Swiper.