Comments (7)
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?
from react-id-swiper.
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
componentDidMount() {
const slides = document.querySelectorAll('.swiper-slide');
const fakeFirstSlide = slides[slides.length - 1];
const fakeLastSlide = slides[0];
if (this.props.onClickFirstSlide) {
fakeFirstSlide.addEventListener('click', this.props.onClickFirstSlide);
}
if (this.props.onClickLastSlide) {
fakeLastSlide.addEventListener('click', this.props.onClickLastSlide);
}
}
from react-id-swiper.
After thinking more about this. I attempted to use loop mode and noticed that it doesn't work very well in my implementation. Soon, I will be working on making loop mode work in a project of mine and will update this with details.
from react-id-swiper.
try wrapping your swiper slides with a div. Let's see if that helps.
<div key={i}>
<img ... />
</div>
from react-id-swiper.
Faced the same issue. Wrapping into with div doesn't help.
from react-id-swiper.
onClickFirstSlide
where is onClickFirstSlide & onClickLastSlide?
from react-id-swiper.
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
componentDidMount() { const slides = document.querySelectorAll('.swiper-slide'); const fakeFirstSlide = slides[slides.length - 1]; const fakeLastSlide = slides[0]; if (this.props.onClickFirstSlide) { fakeFirstSlide.addEventListener('click', this.props.onClickFirstSlide); } if (this.props.onClickLastSlide) { fakeLastSlide.addEventListener('click', this.props.onClickLastSlide); } }
How to implement this if slidesPerView is set to auto and instead of onClick, the listener used is onMouseEnter and onMouseOut?
from react-id-swiper.
Related Issues (20)
- keyboard not working properly on Safari
- Question: Controlled swiper HOT 3
- How to get the Current Index of the Slider ? HOT 6
- LazyLoading not working
- breakpoints not working HOT 1
- import swiper not working HOT 9
- No rtl support HOT 3
- How to get/create instance after destroyed swiper? HOT 1
- react router reload page after loop image
- Vertical Mode is not working properly HOT 1
- The examples codesandboxes are very confusing HOT 2
- Module not found: Can't resolve 'react-id-swiper/src' in 'C:\Users\cheta\React-applications\landing-page\src\components'
- How to make autoplay this swiper
- Module not found: Error: Package path ./css/swiper.css is not exported from package C:\Users\Lenovo\Documents\programacion\portfolio\portfolio\node_modules\swiper (see exports field in C:\Users\Lenovo\Documents\programacion\portfolio\portfolio\node_modules\swiper\package.json) HOT 2
- Two-way Control not working
- How to use pagination arrows outside the swiper wrapper?
- How can I create Infinite Slider ?
- slidesOffsetAfter δΈηζ
- Error in Next 13 / App
- Getting Error while using with next v13
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 react-id-swiper.