Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

carousel stop when i swiper to right, it can't loop #358

Closed
nguyenvanphuc2203 opened this issue Jul 18, 2018 · 10 comments
Closed

carousel stop when i swiper to right, it can't loop #358

nguyenvanphuc2203 opened this issue Jul 18, 2018 · 10 comments

Comments

@nguyenvanphuc2203
Copy link

nguyenvanphuc2203 commented Jul 18, 2018

screen shot 2018-07-04 at 11 57 17 am
my code:

<Carousel
                    layout={'default'}
                    data={this.state.entries}
                    renderItem={this._renderItem.bind(this)}
                    sliderWidth={viewportWidth}
                    itemWidth={viewportWidth*0.575}
                    loop={true}
                    firstItem={2}
                    loopClonesPerSide={10}
                    //enableMomentum={true}
                    enableSnap={true}
                    inactiveSlideScale={0.95}
                    inactiveSlideOpacity={0.8}
                    onSnapToItem={(index) => this.setState({currentSwiperFilm:index}) }
/>

example when i swiper end of right, slider not loop
68747470733a2f2f692e696d6775722e636f6d2f574e4f4259666c2e676966

@nguyenvanphuc2203 nguyenvanphuc2203 changed the title carousel top when i swiper to right, it can't loop carousel stop when i swiper to right, it can't loop Jul 18, 2018
@se1exin
Copy link

se1exin commented Jul 18, 2018

I had this exact problem on iOS yesterday and fixed it by stopping the render of hidden slides:

_renderItem ({item, index}) {
    // Fix for carousel stopping tap event after the second slide
    if (Platform.OS === 'android' || (this.state.slideIndex - 1) <= index) {
      return (<MyItem />)
}

My guess is that the 'hidden' slides are actually sitting on top of the carousel, thus preventing tap/slide events on the shown slide.

Note this does not fix the root issue, but is a (dirty) work around. I didn't have time yesterday to write a full bug report.. and now you have posted one for me :)

Edit: My Carousel setup (using Stack layout)

<Carousel
            ref={(c) => {
              this._carousel = c;
            }}
            layout={'stack'}
            layoutCardOffset={10}
            data={this.state.data}
            firstItem={this.state.slideIndex}
            renderItem={this._renderItem}
            sliderWidth={Dimensions.get('window').width}
            itemWidth={Dimensions.get('window').width * 0.85}
            onSnapToItem={(slideIndex) => {
              LayoutAnimation.configureNext(LayoutAnimation.Presets.linear)
              this.setState({slideIndex})
            }}
          />

@bd-arc
Copy link
Contributor

bd-arc commented Jul 18, 2018

⚠️ You did not follow the contributing guidelines!

As stated in these:

You need to fill out the issue template. This step is mandatory! Not doing so will result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.


@nguyenvanphuc2203 Please provide a Snack example that reproduces the issue, otherwise we won't be able to help you and the thread will be closed. You've already been asked to do so in #347.

@se1exin Your issue is not the same since it has to do with custom layouts and a pesky zIndex issue. But your guess is definitely right ;-) Please see #262 for more info and to find out some workarounds.

@nguyenvanphuc2203
Copy link
Author

i had add gif image demo my issue, please help me :(

@nguyenvanphuc2203
Copy link
Author

screen shot 2018-07-19 at 11 56 30 am
i see in docs props , Number of clones to append to each side of the original items, but it not append to end of right

@bd-arc
Copy link
Contributor

bd-arc commented Jul 19, 2018

@nguyenvanphuc2203 Ok, so you not only don't care about what's asked of you in order to assist you (e.g. reading and filling the issue template, providing a snack example), you also downvote the very people who are devoting their spare time to maintain/improve the plugin and help others.

This behavior is not popular around here and is not going to get you anywhere. Good luck figuring things out on your own!

@bd-arc bd-arc closed this as completed Jul 19, 2018
@LuisRodriguezLD
Copy link

@bd-arc Hello, I am so sorry on how you get treated sometimes. I strongly believe open source project maintainers are extremely underrated.

I have made a snack showing the issue, but there is something weird going on, it works on expo's web simulator but not on device.

The issue again, is the it loops to the left but not to the right.

If you have the time, please test the snack on a real iOS device using the Expo App

@bd-arc
Copy link
Contributor

bd-arc commented Feb 7, 2020

Hi @LuisRodriguezLD,

I'll soon be working on an update that, hopefully, will fix a lot of issues like this one. Fingers crossed though, because it will still rely on ScrollView and FlatList which have a long history of not being that reliable...

@hikopublic
Copy link

Hi @LuisRodriguezLD,

I'll soon be working on an update that, hopefully, will fix a lot of issues like this one. Fingers crossed though, because it will still rely on ScrollView and FlatList which have a long history of not being that reliable...

does it resolve ????

@RuzenDev
Copy link

RuzenDev commented Jul 7, 2023

i am having the same problem. Has anyone fixed this issue

kevingo710 pushed a commit to kevingo710/react-native-snap-carousel that referenced this issue Mar 13, 2024
@kevingo710
Copy link

Hi everyone, I have opened a PR with a possible solution for this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants