Duplicate slides are not updated in loop mode

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]

@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!