附加幻灯片后的刷卡器问题 [英] Swiper issue after append slides

问题描述

我正在研究cordova和jquery项目. 我使用idangero的 Swiper (幻灯片).

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代码:

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>'

但是它显示: HTML代码

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

问题出在update()方法上，我该如何解决?

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

推荐答案

我以前遇到过这个，我所做的是销毁旧的并初始化更新的swiper.

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

这篇关于附加幻灯片后的刷卡器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！