in loop mode, the component events can't be worked if swipe from the first slide to the last slide
See original GitHub issuein loop mode, the component events can’t be worked if swipe from the first slide to the last slide. for example:
<Swiper {...params}>
{
imgList.map((list, i) =>
<img key={i} onClick={this.onDocClick.bind(this, list.url)} src={list.imgUrl} />
)
}
</Swiper>
the onClick
method will worked as well in no-loop, but in loop mode, if swipe from the first slide to the last slide, it couldn’t worked.
I know the Swiper will clone the first and the last of the element in loop mode, how to make it right in react?
Issue Analytics
- State:
- Created 6 years ago
- Reactions:4
- Comments:7 (2 by maintainers)
Top Results From Across the Web
SwiperOptions | Swiper - v8.4.5
Event will be fired in the beginning of animation to other slide (next or previous). Parameters. swiper: default. Returns void. Optional slideNextTransitionEnd ...
Read more >javascript - Swiper JS - show part of next slide - Stack Overflow
This one will show a partial view of the next and previous slide. In my case it's a full width carousel so I'm...
Read more >Set Up Swiper.js for Angular Slides [Example] - Ionic Framework
We recommend Swiper.js if you need a modern touch slider component. ... First, update to the latest version of Ionic: ... Swiping with...
Read more >Swiper - Basic Options - Wappler Documentation
The Swiper component in Wappler is a modern, touch-friendly slider which can ... loop mode, so when on last slide you click/swipe to...
Read more >Vueper Slides - GitHub Pages
Vueper Slides is a Vue JS Slideshow / Carousel. ... If you want more control on events and button wrapper. ... Let's see...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This is more a workaround than a real solution to the problem. This gets very messy when you need to track multiple events. Do you plan to implement a real fix, or are react-events in loop-mode not supported?
Because of nature of how the loop mode works, swiper will add duplicated slides, you will see a copy of last slide when you swipe from the first slide to the last. This copy is not under the manage of react, it will not respond to react events. So you need to add a click eventListener to handle this