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
Infinite Carousel cloned element lose eventlisteners.(example video included) #302
Comments
I'm facing this issue recently as well where I defined a Vue click handler to go to the selected slide, but any of the clones getting clicked doesn't register an event. I would use the 'slider' option, but I don't like seeing blank spots at the end of the list. Any work arounds for this is appreciated. Thanks for GlideJS, btw! |
I am also experiencing this issue with Vue. Did anyone figure out some clean workaround? |
Is this custom infinite functionality or am I missing an option to enable this? |
I'm also blocked on this with React Components as slide elements. The issue seems to be that @Jorenm I think what you're looking for is @jedrzejchalubek Do you have any recommendations here? Thanks for your work on this! |
Try putting your event listeners in the I was having the same issue where my lightbox wasn't initiating on any cloned elements, but after putting my
|
Does not work with vanilla JS, cloned element lose click event.
|
Mounting carousel in a Thanks |
so, how to resolve this problem? |
Not sure how it would be implemented in React, but I advise you to try with events delegation. In simple words add the event to a parent element, so it will not disappear after cloning and conditionally run login if the target is a desired element function clickHandler(e) {
if (e.target.matches('.item')) {
console.log(e.target.innerHTML);
}
}
const el = document.querySelector('.el');
el.addEventListener('click', clickHandler); |
@jedrzejchalubek, in your code, which one is the parent and which is the child? Also, could you target child elements that are removed from parent by several levels? Thanks! |
@mgalkus Events go up, through the DOM, so add the event listener to the glide track or something (something that won't be removed) and then you can get the event's target to work out which slide the event was targeted at. Great idea @jedrzejchalubek :) |
I have the same problem in Vue, when cloned slide not load some props inside. |
Also had issues here in a React/Gatsby app. Went with the click handler solve above, just targeting the clones only. Not great but it worked. |
This is a big offtopic but this solved my case:
|
Also have this issue. cloned slides are not ioncluding the events handlers added via a vue app. |
The cloned element will lose its event listeners and there is no way to pass it on cloning. The current implementation of infinity scrolling has this limitation. The solution here is to use event delegation that I described here: #302 (comment) Changing this implementation logic so slides are not cloned but changes their positions is on my roadmap |
Please see my recording Video
Infinite Carousel cloned element lose event listeners.
My workaround is not using carouse but slider. Which is ok by me.
I use Glide along with react. Maybe I did something wrong?
The code is nasty, I'm not going to put it here, feel free to close my issue.
But Glide is the only best carousel currently in modern JS world.
Other react carousel option has too many bugs. I've tried.
The text was updated successfully, but these errors were encountered: