Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Duplicate slides are not updated in loop mode

See original GitHub issue


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.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:2
  • Comments:5

github_iconTop GitHub Comments

KODerFunkcommented, Feb 22, 2020

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

bevndascommented, Apr 8, 2020

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Option to not show duplicate items if "Items < SlidesPerView ...
Currently, when loop is active or during autoplay, it'll show duplicates regardless. Thanks in advance for the feature request consideration.
Read more >
In loop mode, duplicate slides are not being updated when the ...
In loop mode, duplicate slides are not being updated when the contents of the original slides change.
Read more >
Swiper js showing 3 identical slides when there is one slide
The problem is that whenever there are less than 3 slides those slides are duplicated to fill also the empty spaces so, for...
Read more >
Swiper loop without duplicate - CodePen
.swiper-slide. 4. img(src=`` alt). 5 .swiper-slide. 6. img(src=`` alt). 7 .swiper-slide.
Read more >
Options - Splide
You can update responsive options by breakpoints or by passing an object to ... Determines how many pages (not slides) around the active...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found