-
Notifications
You must be signed in to change notification settings - Fork 187
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
Breakpoints + Wraparound Not Working with Dynamic List Length #454
Comments
I was able to get a working solution for the time being, although it is not exactly what I was hoping to achieve but it is certainly close enough and I have been wasting too much time on this so it will do for now until a better fix can be implemented! I turned the wrapAround property into a computed property as well (not sure why it took me so long to think of that!) so that it's only set to true if the value of itemsToShow is less than the number of items in the data list. Updated Carousel component:
Added this outside the export function (from AndreyMyagkov)
Updated data:
Added this under computed properties:
I reverted the getItemsToShow '-1' fix from my original edit, because it was no longer needed! And then updated and added some more stuff:
Now what it does is set wrapAround to false as long as the value of itemsToShow is greater than or equal to the number of slides. I don't love that it doesn't work exactly as it did before, but it works well enough and it is fine! I still feel that there is a bug to be fixed here, as even with the validation checking I was performing on itemsToShow, I could only get it to work as long as itemsToShow < slidesCount, it was not working when itemsToShow = slidesCount as long as wrapAround was set to true. |
Related to #454 --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ismail9k/vue3-carousel/issues/454?shareId=XXXX-XXXX-XXXX-XXXX).
Pretty sure this was fixed in #450 https://github.com/ismail9k/vue3-carousel/pull/450/files#diff-38321f8dd9c1fcb812447c55a74ea3e6fab4e37706d5b93f68735ea8d2bba14eR22-R27
As for the "infinite loop" you are referring to, you probably just have (infinite) animations on your page, triggering many slider recompute triggering the error, that was also fixed in #441 So version 0.10.0 (which seems not released yet) should work properly |
@dinahcoe |
IT WORKS PERFECTLY NOW THANK YOU SO MUCH! |
Bug Description
I upgraded vue3-carousel in my project from v0.3.1 to v0.9.0 yesterday, and it is causing an infinite loop that crashes my computer if the number of items in the carousel is equal to the max amount of items visible.
I am using ajax calls to load carousel slide data from server side, so I had written the breakpoints as a computed property since the number of slides may be different for each user. This worked perfectly fine before I upgraded my version, but after upgrading I have found that if the number of items available to the user is 4 or less, the carousel component will cause a runtime error in an infinite loop.
I have isolated the problem, and it seems like there may be something conflicting between the breakpoints and having wrapAround turned on. I tested using static breakpoint values with no wrapAround, and it seemed to work, and I tested using wrapAround with no breakpoints and it works fine, but even if I use static breakpoints with wrapAround, I am experiencing the infinite loading.
I have confirmed that if I test the feature using an account with more than 4 items available, the Carousel component works exactly as expected. I did see this feature request in the issues already, so I'm assuming this may be a known issue, but I am already performing validation on the breakpoints to ensure that the value of itemsToShow does not exceed the number of items available and I am still experiencing this problem. I also tried loading the page with the window already resized to see if it would work if the initial width of the Carousel was smaller than the max width of the items, and it still caused the runtime issue.
To Reproduce
Steps to reproduce the behavior:
wrapAround: true
and values for thebreakpoints
property.Expected behavior
The Carousel should display a number of Slides based on the width of the viewport and the Carousel should wrap around to the first Slide if it reaches the last Slide in the list. Carousel should disabled wrap around only if the total number of Slides is equal to the maximum value of itemsToShow, and should enable wrap around if the viewport is resized to a width that correlates to a breakpoint with a value for itemsToShow that is less than the total number of Slides.
Console Error
I get thousands of instances of this type of error in the console when the page tries to load:
TypeError: can't access property "vnode", n[((s + n.length) % n.length)] is undefined
Desktop (please complete the following information):
Additional context
Here are is a full example of my code (with any identifying specifics removed) that was working as expected prior to updated to v0.9.0.
I apologize for the long block of code, but the reason I have so many breakpoints is because the slides need to remain the same width even if the width of the carousel changes, and the values jump around because the layout of the page changes at different screen sizes.
I left in both the computed breakpoints and the hard-coded breakpoints, however please note I am experiencing this error even if I use hard-coded breakpoints and remove the ':breakpoints="breakpoints"' from the Carousel component. If I comment out either the wrapAround or the breakpoints property of the settings, it works and still loads, but with both of them together it does not work.
Before updating to v0.9.0, if the user clicked one of the items in the Carousel, it would automatically slide to that item, which worked with the wrapAround property because there were cloned slides. Although the wrapAround may not necessarily be needed if only 4 items are present (and I have classes denoting which item is selected) it would be nice if the carousel could still work in the same way even for 4 or less items because the breakpoints are still necessary if the user resizes the window.
I am open to any suggestions or corrections to my code if anyone can tell me how to make this work!
Edit:
Okay I actually had an epiphany just now that I can sort of get around it by changing my validation function to
And this (almost) Works! I can load the page and it shows 3 out of 4 items, but if I resize the window, then it triggers the bug again... Regardless, I would still be submitting this as a bug even if the almost-solution worked perfectly because I would like to be able to show the maximum amount of viewable Slides if there is enough space to do so and not have to reduce the itemsToShow by 1 just to avoid this extreme bug.
If there is anything that can be suggested to help me solve this problem until this issue has been patched, I would greatly appreciated it as this is a live feature and I we have pending releases for it, so I need to solve it quickly and hope that it can work exactly as it did before the update!
The text was updated successfully, but these errors were encountered: