swiper中动态添加了后台获取到的数据填充之后不显示的问题

方法一:

在最开始初始化swiper的时候就添加一下三条注释的语句(未测试)

var mySwiper = new Swiper('.swiper-container',{
            loop: true,
            autoplay: 2000,
            direction : 'vertical',
            // initialSlide :0,
            // observer:true,//修改swiper自己或子元素时,自动初始化swiper
            // observeParents:true//修改swiper的父元素时,自动初始化swiper
        });

方法二:

在动态添加完数据之后,添加一个swiper的初始化即可:mySwiper.init(); (mySwiper为Swiper的实例对象) (测试好用)

示例:

var mySwiper = new Swiper('.swiper-container',{
            loop: true,
            autoplay: 2000,
            direction : 'vertical',
        });
        //每隔5秒查一次新数据
        setInterval ("getProjects()", 5000);
        // getProjects();
        function getProjects(){
            $.ajax({
                type : "POST",
                url : "lib/getUsers.php",
                dataType:"json",
                success : function(result){
                    if (result.code == "0") {
                        console.log("no data");
                    } else {
                        var users = result.users;
                        console.log(users);
                        for (var i = 0; i < users.length; i++) {
                            
                            var str = "";
                            str += "<div class='swiper-slide'>";
                            str += users[i].name;
                            str += "</div>";
                            $(".swiper-wrapper").append(str);
                            mySwiper.init();
                        }
                    }
                },
                error : function(){
                    alert("网络异常,请重试!");
                    return;
                }
            }); 

        }
原文地址:https://www.cnblogs.com/rommel0618/p/7942894.html