Swiper中文论坛

标题: 动态加载swiper-slide，图片滑动两次pagination能正常对应到图片 [打印本页]

作者: xuyan0321 时间: 2016-5-4 11:43
标题: 动态加载swiper-slide，图片滑动两次pagination能正常对应到图片

function test(data,s){
var value1 = data.body.data[s].medialist;
   for (var i = 0;i<data.body.data[s].medialist.length; i++){
$("#swiper2").append('<div class="swiper-slide"><img  width="1142" height="749" src="http://192.168.11.39:8080/guard/uploadFiles/productImgs/'+value1[i].filepath+'"/></div>');
};
   var swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
paginationType : 'bullets',
observer: true,
observeParents:true,
});
};

$(".ljdk_ul li").click(function(){
var s=$(this).index();
$(".swiper-slide").remove();
$(".swiper-pagination").children().remove();
test(str2,s);
})
</script>

作者: xuyan0321 时间: 2016-5-4 11:52
通过ajax 请求把 2张图片 append 到轮播。点击 li 切换轮播里的图片。分页器不能正常跟着图片滑动切换，滑动 2次图片分页器才会切换

作者: xuyan0321 时间: 2016-5-4 11:58
来个大神

作者: jjjjjjjjjjjjjjj 时间: 2016-5-5 17:44
我与到同样的问题了，很蛋疼，不知如何下手

作者: 547269508 时间: 2016-5-11 17:14
我也遇到差不多的问题，动态加载，然后切换的时候分页器少了2个

作者: xuyan0321 时间: 2016-6-17 17:28
            <div class="swiper-container">
            <div class="swiper-wrapper" id="swiper2">
                  </div>
               <div class="swiper-pagination"></div>
            </div>

<ul class="zsk2"> 

   </ul>
</div>
</div>
</div>
<div class="footer1">
<span class="fl mar154">电子银行</span><span class="fl">智慧银行</span><span class="fr mar155">贴心首选</span><span class="fr mar156">常系民业</span>
</div>
</div>
<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js"></script>
<script>
var preciousMetal="国际业务";
$(document).ready(function() {
var obj=JSON.parse(localStorage.getItem("key"));
var obj1=JSON.parse(localStorage.getItem("key1"));
console.log(obj1);

var or=obj1.body.data.organcode;

for(i=0;i<obj.body.data.length;i++){
if(preciousMetal==obj.body.data[i].TYPENAME){
var id=obj.body.data[i].ID
}
}

getdata(id,or);
});
function getdata(id,or){
var str={"body": {"organcode": or,"producttype": id}, "head": { "senddate": "20160406","organcode": "6","workdate": "20160406","tradecode": "20100",
"devicecode": "WX0008","reserve": "1","sendtime": "170112", "version": "1.0"} };
var last=JSON.stringify(str);
var str2=null;
var len=last.length;
len=len.toString();
var x=8-len.length;
if(len.length<8){
for(l=0;l<x;l++)
{
len=0+len
}
};
$.ajax({
      type:"post",
      url:"http://192.168.24.88:8080/guard/httpinterface",
      dataType:"json",
   data:{jsonparam:len+JSON.stringify(str)},
      success:function(data){
   console.log(data)
var s=0;
for(var xy=0;xy<data.body.data.length;xy++)
{
$(".main_ul").append('<li class="fr"><img src="images/fzp_lbx.png" class="img_q">'+data.body.data[xy].productname+'<img src="images/fzp_hx2.png"></li>');
$(".zsk2").append('<li class="fr">'+data.body.data[xy].productintroduction+'</li>');
};
test(data,s);
$(".zsk2 li").hide().eq(0).show();
$(".main_ul li:first").trigger("click");
$(".mark").show();

   var swiper = new Swiper('.swiper-container', {
observer: true,
observeParents:true,
runCallbacksOnInit : true,
autoplayDisableOnInteraction : false,
});
      },
      error:function(){
   alert("获取信息失败") ;
   $(".mark").hide();
      }
      });
};

function test(data,s){
str2 = data;
var value1 = data.body.data[s].medialist;
   for (var i = 0;i<data.body.data[s].medialist.length; i++){
   if(value1[i].filetype=='IMAGE'){
   var strs= new Array();
   strs=value1[i].filepath.split(",");
   for( var i2=0;i2<strs.length;i2++){
   $("#lbbox2").children().remove();
$("#swiper2").append('<div class="swiper-slide" id="swiper_id" style="background-image:none"><img width="600" height="700"  src="'+strs[i2]+'"/></div>');
}}
};

};

$(".zsk2 li").hide().eq(0).show();
$(".main_ul li").live('click',function(){
$(this).addClass("back_img3").siblings().removeClass("back_img3");
var s=$(this).index();
$(".swiper-slide").remove();
$(".swiper-pagination").children().remove();
$(".zsk2 li").hide().eq(s).show();
test(str2,s);
});

var swiper = new Swiper('.swiper-container', {
   /* autoplay : 3000,*/

observer: true,
observeParents:true,
runCallbacksOnInit : true,
autoplayDisableOnInteraction : false,
});
swiper.detachEvents();

swiper.attachEvents(); swiper.slideTo(0, 10, false);
</script>
</body>
</html>
</script>
</body>
</html>

作者: xuyan0321 时间: 2016-6-17 17:42
ajax 动态添加删除 swiper ；添加的数目不一样会出现空白页怎么解决

作者: miaoqiang 时间: 2016-7-6 09:23
这个其实很简单，先请求数据，得到图片，然后再动态的创建swipe就可以了

作者: rongyi2233 时间: 2017-1-7 11:50
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

作者: xudong 时间: 2017-1-11 11:39
这么复杂啊

作者: ryang123456 时间: 2017-1-12 10:02
9楼正解

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)