swiper动态添加图片问题

swiper （Table切换和动态加载时候出现的问题）

本文为让心灵-去旅行原创，转载请说明.。

我们在写一个简单的swiper图片轮播的时候很简单，是写死的也就那么几张图片轮播。如果这时候图片和一些东西是后台的，你从js里动态添加到DOM时，这时候你就会发现各种问题。比如轮播图不动，无法滑动。下面的指示小圆点变得混乱了。等等。其实这些都是swiper的渲染问题，因为简单的swiper页面是静态的，资源数稳定的。当产生变化时，swiper需要重新渲染才行，不然就会出现问题。那么怎么解决呢，最简单的办法就是在ajax成功接收后台数据时我们开始渲染调用swiper函数;

例：

function  showSlider(data){　　　　 var  data = eval(data);　　　　　 //这是动态添加数据
    var  str= "" ;
    for ( var  i =0;i
        str+= "" +              "+data.lunbos[i].link_url+ "'>" +                  "+data.lunbos[i].img_url+ "' alt=''>" +              "" +              "" +data.lunbos[i].desc+ "" +          "" ;
            "+data.lunbos[i].link_url+ "'>" +
                "+data.lunbos[i].img_url+ "' alt=''>" +
            "" +
            "" +data.lunbos[i].desc+ "" +
        "
    };
    $( '#slider' ).append(str);　　　　　　 //添加完以后就可以调用swiper了 哦了
        var  mySwiper =  new  Swiper( '.swiper_one' , {
        // direction: 'vertical',
        loop:  true ,
        autoplay : 2000,
        // 如果需要分页器
        pagination:  '.swiper-pagination' ,
    });