Swiper issue after append slides

问题:

i work on a cordova and jquery project. I use Swiper by idangero for the slides.

my issue appears when i append new slides and try to display them.

Jquery code:

if(row.pictures != ''){
    var num_slide = mySwiper.slides.length;
    console.log("[slidecontent ] "+slidecontent);
    mySwiper.appendSlide([slidecontent]);
    for (var i = 0; i < num_slide; i++) {
        mySwiper.removeSlide(0);
    }
    mySwiper.update();
}

The slidecontent console log display that:

[slidecontent ] '<div class="swiper-slide"><img src="..."></div>',
'<div class="swiper-slide"><img src="..."></div>',
'<div class="swiper-slide"><img src="..."></div>'

But it displays that: HTML code

<div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); transition: 0ms; -webkit-transition: 0ms;">
        <div class="swiper-slide swiper-slide-duplicate swiper-slide-active" data-swiper-slide-index="0">
            <img src="..."></div>
            '',
            '',
            '<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="0"><img src="..."></div>'
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0">
            <img src="..."></div>
    </div>
</div>

The issue comes from the update() method, how can i fix this?

回答1:

I met this one before, what I did was destroying the old one and initialise the updated swiper.