question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Swiper on button click jumps 2 slides

See original GitHub issue

Which OS ?

ios and android

Version

Which versions are you using:

  • react-native-swiper v1.5.13
  • react-native v0.56.0

Expected behaviour

On click the button go to the next slide

Actual behaviour

When i click to the button on the first time it jumps to the same slide again

How to reproduce mit>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here.

Steps to reproduce

  1. yarn add react-native-swiper
  2. Create a component like this
<Swiper
 height={140}
 showsButtons
>
  <Text>Slide 1</Text>
  <Text>Slide 2</Text>
</Swiper>

4.Click on the button to go to the next slide

kapture 2018-09-18 at 1 17 40

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:1
  • Comments:6

github_iconTop GitHub Comments

3reactions
HighSoftWare96commented, Nov 9, 2018
0reactions
JayceTsiencommented, Oct 30, 2018

add the key to the Swiper componet like this:

<Swiper
        key={this.state.productImages.length}  // focus
        style={styles.swiper}
>
        {swiperItems}
</Swiper>

or like this:

const swiperItems = this.state.productImages.map(item => {
        return(
                <Image 
                        source={{uri: item.realpath}}
                        style={styles.swiperimage}
                        key={item.position}  // focus
                />
        )
})
Read more comments on GitHub >

github_iconTop Results From Across the Web

Swiper.JS Next Button moving 1.5 slides - Stack Overflow
I am using Swiper.JS to create a two row card slider. Problem: When pressing the next button, instead of transitioning to the next...
Read more >
Swiper—Jumping on Page Load Resolved | by Aaron K.
The original Swiper demo jumps around and flickers on page load. Ugh. For an unknown reason it was not apparent until many days...
Read more >
jQuery slideUp() Method - W3Schools
The slideUp() method slides-up (hides) the selected elements. Note: Hidden elements will not be displayed at all (no longer affects the layout of...
Read more >
Swiper API
Slides --> <div class="swiper-slide">Slide 1</div> <div ... slidePrev() methods calls, on Navigation "buttons" clicks and in autoplay.
Read more >
Use your Chromebook touchpad - Google Support
Turn on tap dragging. Turn touchpad acceleration on or off. Swap your primary mouse button, if you use a mouse. Adjust how quickly...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found