如何实现动态幻灯片创建javascript?

如何实现动态幻灯片创建javascript?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在用Phone Gap android做一个项目。我正在用java脚本实现函数。我已经用 现在,我将分享我用来实现这一点的代码,以便它能够帮助您找出我的错误 var mySwiper = new Swiper('.swiper-container',{ //Your options here: mode:'horizontal',loop: true, speed : 500, freeMode : true, freeModeFluid : true, }); 现在,我的输出不是期

我正在用Phone Gap android做一个项目。我正在用java脚本实现函数。我已经用

现在,我将分享我用来实现这一点的代码,以便它能够帮助您找出我的错误

var mySwiper = new Swiper('.swiper-container',{
//Your options here:
mode:'horizontal',loop: true, speed : 500, freeMode : true, freeModeFluid : true,
});  

现在,我的输出不是期望的

仅显示1张幻灯片。未实现滑动功能,其他值均不可见

我该怎么办? 请引导我

第二个备选方案,我实现如下(在浏览次数之后):

.clinical       
{
    font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
 background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
 width:auto; height:30%; display:block; overflow:hidden;float:left; 
}
var val = k+1;
            var superdiv = document.getElementById('swiper-wrapper');
            var newdiv = document.createElement('div');
            var divIdName = 'swiper-slide'+val;
            console.log("div name: "+divIdName);
            newdiv.setAttribute('id',divIdName);
            newdiv.setAttribute('class','swiper-slide');
            superdiv.appendChild(newdiv);
     --->       var cnt1 ="var newSlide = mySwiper.createSlide('<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left/>;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>', 'swiper-slide', 'span');
            document.getElementById(divIdName).innerHTML=cnt1;
            document.querySelector('.swiper-slide');
            console.log("split value: "+value[k]);    
最重要的事实是,所有5个值都显示在日志中。但是,看到了1张幻灯片。


简单地说,滑动功能不起作用。

尝试在创建幻灯片后立即调用mysweer.reInit()。还可以查看幻灯片API

在动态创建时使用
reInit
再次调用您的刷卡器。 在我的例子中,该产品有各种颜色实例,第一次加载工作正常,在通过单击颜色动态加载新内容时,swiper插件无法检测到新添加的dom

解决方案是调用
reInit()

用例

<div id="swipe_body">
    <div class="swiper-container swiper-threshold">
        <div class="swiper-wrapper" id="swiper-wrapper">

        </div>
    </div>
</div>
var mySwiper = new Swiper('.swiper-container', {});

function dynamic_content(){mySwiper.reInit();}

可能已经太晚了,但另一个答案似乎因为更新而过时了。对我来说,下面这句话很管用

mySwiper.appendSlide('<div class="swiper-slide">My Slides"</div>')
myswider.appendSlide('My Slides'))

任何解决方案,请您回答。.是的,我已经解决了。我刚刚启动了刷卡器并使用了它。
var mySwiper = new Swiper('.swiper-container', {});

function dynamic_content(){mySwiper.reInit();}
mySwiper.appendSlide('<div class="swiper-slide">My Slides"</div>')