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

Svelte component inside virtual swiper not rendered correctly when prepending slides #4564

Closed
schoero opened this issue May 16, 2021 · 4 comments

Comments

@schoero
Copy link

schoero commented May 16, 2021

  • Swiper Version: 6.6.1
  • Svelte Version: 3.38.2
  • Platform/Target and Browser Versions: Tested on MacOS BigSur 11.3.1 with Safari 14.1 (16611.1.21.161.6), Chrome 90.0.4430.212 and Firefox 88.0.1

What You Did

I try to create an online calendar using Framework7, swiper and svelte. I want to create an infinite calendar where the next day gets loaded as soon as the first or last slide is active.

https://codesandbox.io/s/swiper-svelte-fork-forked-r2z7p?file=/App.svelte

In the codesandbox demo, when you swipe two times, so that a new slide gets prepended, the component gets rerendered with wrong properties and therefore show the wrong day. But if I skip the svelte component and include its source code directly in the slider, everything works as expected. You can comment out the svelte component on line 115 and uncomment the div on line 113 to test this behaviour.

The problem occurs only if the slideTo method is called. When I append the slides, which does not call the slideTo method, everything works just fine.

Expected Behavior

I expect that svelte components get rendered correctly when prepending them in a slide.

Actual Behavior

The svelte component gets rendered with wrong properties.

@schoero
Copy link
Author

schoero commented May 17, 2021

I have made a simpler test case: https://codesandbox.io/s/swiper-svelte-fork-forked-rgxie?file=/App.svelte.
Inside the swiper.virtual.prependSlide method, the things that are happening are basically the following:

  1. The new slide is unshifted to swiper.virtual.slides.
  2. swiper.virtual.update(true) is called.
  3. swiper.slideTo() is called to get to the new index.

I have implemented this behaviour in the prependDate function on line 46, but skipped the slideTo call.
You can see that when you click on the prepend button when you are on the first slide, nothing gets rerendered. If then the slideTo method is called inside the prependSlide method, the swiper goes 'back' to the next slide, because the new slide is not rendered yet.
But if you skip the slideTo call and swipe forward a few times to force a rerender and then swipe back, you can see that the new slide gets rendered correctly.

So the problem is that the new slides do not get rendered when prepending a slide, and not an issue in the slideTo method as I initially thought.

@nolimits4web
Copy link
Owner

Here in Svelte, you shouldn't use swiper.virtual.prependSlide/appendSlide methods, you should just modify your initial virtualSlide array with push/unshift but I see it also have some issue

@nolimits4web
Copy link
Owner

Fixes in Swiper 6.6.2. Here is the full working example with logic for example https://github.com/nolimits4web/swiper/blob/master/playground/svelte/Virtual.svelte

@hugotox
Copy link

hugotox commented Dec 10, 2023

Hello @nolimits4web the svelte example is missing. Any advice how to use it with svelte?

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

3 participants