Duplicate slides are not updated in loop mode

[tylermwatts]

Example:
https://codesandbox.io/s/thirsty-merkle-iyjcu

Desired behavior:
I am displaying slides that are looping in autoplay mode, and I want the user to be able to change the text stored in state that is displayed on the first slide, even after the slideshow has looped.

Current behavior:
In the linked example, once the slideshow loops it's no longer possible to update the slide text, even when using rebuildOnUpdate.

I've also tried using getSwiper to keep the Swiper instance in state and manually destroy & create new loops on state updates but that hasn't worked either.

Thanks in advance for any light you can shed on this issue.

Edit:
It appears that this is only an issue when the slide to be updated is the first child of the Swiper component. In my particular use case, I was able to move this slide and fix the problem, so as long as the slide I'm trying to update isn't the first slide this behavior doesn't seem to pop up. YMMV.

This obviously is a workaround, and not a real solution, so it still needs to be fixed; however, I was not able to ascertain the root cause of this issue, so it remains to be discovered whether this is a problem with Swiper.js in general, or react-id-swiper in particular.

[KODerFunk]

@tylermwatts Hi! This is a very big problem! You can find some information here #85

I use very-ugly hook for duplicate the logic of interactions with a direct processing a DOM instead of doing it with React.

The problem is that Swiper (wrapped lib) generates duplicates itself, and this is no longer under the control of React (this lib).

In fact, someone can try how to take control of the creation and deletion of duplicates from Swiper, then react-id-swiper could make duplicates itself and give them to the engine. @kidjp85 Hi! Any ideas?

[Quirksmode]

I am having the same issue, I have dynamic elements within each slide and all functionality is lost when the slide gets cloned

[rokinsky]

+1 having same issue
I found nolimits4web/swiper#2629 in wrapped lib and I have used loopDestroy() and loopCreate() to fix it.

[KODerFunk]

@rokinsky ok, this trick solve update markup for dup-slides, but no solve for interactions. Duplicate-slides is not React-components.
Duplicate-slides need solve at this library level.

[bevndas]

hmm this fix worked for me
before adding a slider destroy the loop
swiper.loopDestroy();
Add the slider setTimeout for a sec and update the swiper and create the loop again
setTimeout({
directiveRef.update or swiper.update()
swiper.loopCreate();}, 1000);

the loop doesnt work properly on slide update so manually updating it! hope it works for you as well!