动态加载swiper-slide，图片滑动两次pagination能正常对应到图片

xuyan0321

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

通过ajax 请求  把 2张图片  append 到 轮播 。点击 li 切换 轮播里 的图片。 分页器 不能 正常跟着图片滑动切换 ，滑动 2次图片分页器才会切换

xuyan0321

来个 大神

jjjjjjjjjjjjjjj

我与到同样的问题了，很蛋疼，不知如何下手

547269508

我也遇到差不多的问题，动态加载，然后切换的时候分页器少了2个

xuyan0321

                <div class="swiper-container">
                <div class="swiper-wrapper" id="swiper2">
                        </div>
                 <div class="swiper-pagination"></div>
                </div>
                               
                                <ul class="zsk2"> <!--1250 600-->

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

ajax  动态 添加  删除 swiper ； 添加的数目不一样 会出现空白页 怎么 解决  

miaoqiang

这个其实很简单，先请求数据，得到图片，然后再动态的创建swipe就可以了

rongyi2233

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

xudong

这么复杂啊