In loop mode, duplicate slides are not being updated when the contents of the original slides change

[brandonce]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 4.2.6

• Platform/Target and Browser Versions: All browsers, but tested on macOS, CHROME

• Live Link or JSFiddle/Codepen or website with issue: https://jsfiddle.net/knankv59/2/

What you did

Swiper config is at the bottom of the Javascript window in the jsfiddle (loop mode, loopedSlides set to 3, slidesPerView set to 1)

Click the right navigation arrow twice to swipe forward to slide 2.
Click the button above the slideshow to change the content of slide 2, which now reads "New content!"
Click the right navigation arrow six more times, going to the end of the slides and looping back around to slide 2.

Expected Behavior

Slide 2's text should still say "New content!"

Actual Behavior

Slide 2's text is still just the original "2".

_
Is there any way to refresh specific duplicate slides automatically when their original slide's content changes?

[jhowsick]

Same issue here. Swiper does not update duplicate slides when the original has changed. Any workarounds would be highly appreciated.

[brandonce]

@jhowsick One way is manually redoing the loop by calling methods on the swiper instance itself.

const swiper = this.swiper;
swiper.loopDestroy();
swiper.loopCreate();

This is hacky though. Hopefully an official fix will happen.

[clevergod]

I had the same problem

[cgh20xx]

me too

[nolimits4web]

It is not supported and won't be, it should be done manually, for example like @brandonce described

[golee]

How about something similar with renderExternal() ?.. Sync React or Vue with loop mode is so painful.

[golee]

I currently use the method that just update html of dupslides

updateDuplicateSlides = function() {
  var swiper = this;
  var $wrapperEl = swiper.$wrapperEl;
  var params = swiper.params;
  var slides = swiper.slides;
  $wrapperEl.children(("." + (params.slideClass) + "." + (params.slideDuplicateClass)))
  .each(function() {
    var idx = this.getAttribute('data-swiper-slide-index');
    this.innerHTML = $wrapperEl.children('.'+params.slideClass+'[data-swiper-slide-index="'+idx+'"]:not(.'+params.slideDuplicateClass+')').html();
})

[prod3v3loper]

Our swiper, here to note the onTransitionStart function of passing our function to trade the duplicates.

new Swiper( '.swiper-container', {
    slidesPerView: 1.25,
    spaceBetween: 15,
    centeredSlides: true,
    parallax: true,
    onTransitionStart: handleDuplicates.bind( this ) // To handle the duplicates
} )

Your slides with events we set:

let videos: [].slice.call( document.querySelectorAll( '.swiper-slide .videobox video' ) );

videos.forEach( function ( item, index ) {
    item.addEventListener( 'touchstart', playVideo.bind( this ) );
}.bind( this ) );

We handle the duplicates on transition start with this function handleDuplicates()

/**
 * Update, change or do what you want here with the duplicates
 */
handleDuplicates() {

    let swiperDuplicatesWithoutEvents = [].slice.call( document.querySelectorAll( '.swiper-slide-duplicate .videobox video' ) );

    // Remove olds
    swiperDuplicatesWithoutEvents.forEach( function ( item, index ) {
        item.removeEventListener( 'touchstart', playVideo.bind( this ) );
    }.bind( this ) );

    // Add news
    swiperDuplicatesWithoutEvents.forEach( function ( item, index ) {
        item.addEventListener( 'touchstart', playVideo.bind( this ) );
    }.bind( this ) );
}

[victorcamargos]

I was struggling with this behavior as well and since I could not find any solution out of the box for my problem I ended up with a mix of hacks that worked perfectly to me. In my case some slides have a counter and also some buttons, both were not working on duplicated slides. So I used the solution proposed by @golee to copy the dom at the moment of slide transition start (slideChangeTransitionStart) and then on (slideChangeTransitionEnd) I slide it to the realIndex but with speed 0 so it's not noticed by the user.

slideChangeTransitionStart() {        
            let $wrapperEl = this.swiper.$wrapperEl;
            let params = this.swiper.params;
            $wrapperEl.children(('.' + (params.slideClass) + '.' + (params.slideDuplicateClass)))
                .each(function () {
                    let idx = this.getAttribute('data-swiper-slide-index');
                    this.innerHTML = $wrapperEl.children('.' + params.slideClass + '[data-swiper-slide-index="' + idx + '"]:not(.' + params.slideDuplicateClass + ')').html();
                });
    }

slideChangeTransitionEnd() {
            this.swiper.slideToLoop(this.swiper.realIndex, 0, false);
    }

[peter-wang-wsl]

@nolimits4web I follow @brandonce described, then found if I have 2 slides in swiper, I only can change the first slide value and can't change the second one. swiper.loopDestroy() will rollback the value of second slide.

[thowfeeq178]

//this will update the duplicates only once if you slides update

this.mySwiper.once('transitionStart',function updateDuplicates() {
this.loopDestroy()
this.loopCreate()
})

[JoseCigarro]

//this will update the duplicates only once if you slides update

this.mySwiper.once('transitionStart',function updateDuplicates() {
this.loopDestroy()
this.loopCreate()
})

Hello, I'm having the same problem and can't fix it. Is possible for you to give me a real example, probably i'm pasting your code in a wrong place.

Thanks a lot.