Javascript Swiper滑块在上一张幻灯片之后创建空白

我正在使用Swiper Slider开发一个混合应用程序，我正在使用Phonegap和Framework7创建该应用程序

每张幻灯片都包含通过Ajax调用带来的动态内容

问题是，我在同一页上有两个滑块，当我在这两个滑块上看到最后一个滑块时，就会出现一个巨大的空白区域，我们用手指滑动的次数越多，就会产生越多的空白区域

我将在这里留下一些打印和相关的代码位

我的HTML文件：

    <div class="ementa-sobre pl30 mt60">

         <h3 class="titulo-v1">Ementa <div class="circulo-pequeno"></div> <span class="info-complementar-titulo" id="numero-pratos"></span></h3>

        <div class='swiper-container swiper-ementa-home'>
              <div class='swiper-wrapper' id="slider-ementa-home">
              </div>
        </div>


    </div>



 <div class="eventos-sobre pl30 mt60">

          <h3 class="titulo-v1">Eventos <div class="circulo-pequeno"></div> <span class="info-complementar-titulo" id="numero-eventos"></span></h3>

          <div class='swiper-container swiper-eventos-home'>
              <div class='swiper-wrapper' id="slider-eventos-home">
              </div>
          </div>


</div>

校训
事件

我的JS文件：

myApp.onPageInit('home', function (page) {


    $(document).ready(function()
    {

var ajaxurl3="myurl.php";
        $.ajax({
            type: "POST",
            url: ajaxurl3,
            success: function(data) {
                $.each(data, function(i, field){
                    var id=field.id_categoria;
                    var nomeCategoria=field.nome_categoria;
                    var imgCategoria=field.img_categoria;
                    var string = "<div class='swiper-slide' style='background-image:url(https://pizzarte.com/app/img/ementa/"+imgCategoria+")'><a href='pratos.html?idcat="+id+"&cat="+nomeCategoria+"'><p>"+nomeCategoria+"</p></a></div>";
                    $("#slider-ementa-home").append(string);

                })
            },
            complete: function (data) {
                var mySwiper2 = myApp.swiper('.swiper-ementa-home', {
                    spaceBetween: 15
                  });
               }
        });



        var ajaxurl4="myurl2.php";
        $.ajax({
            type: "POST",
            url: ajaxurl4,
            success: function(data) {
                $.each(data, function(i, field){
                    var id=field.id_evento;
                    var nomeEvento=field.nome_evento;
                    var imgEvento=field.img_evento;
                    var string = "<div class='swiper-slide' style='background-image:url(https://pizzarte.com/app/img/eventos/"+imgEvento+")'><a href='eventos.html?idcat="+id+"&cat="+nomeEvento+"'><p>"+nomeEvento+"</p></a></div>";
                    $("#slider-eventos-home").append(string);

                })
            },
            complete: function (data) {
                var mySwiper3 = myApp.swiper('.swiper-eventos-home', {
                    spaceBetween: 15
                  });
               }
        });


 });
})

myApp.onPageInit（'home'，函数（第页）{
$（文档）.ready（函数（）
{
var ajaxurl3=“myurl.php”；
$.ajax({
类型：“POST”，
网址：ajaxurl3，
成功：功能（数据）{
$.each（数据、函数（i、字段）{
var id=field.id\u categoria；
var nomeCategoria=field.nome_categoria；
var imgCategoria=field.img_categoria；
var字符串=”；
$（“#slider-ementa-home”）.append（字符串）；
})
},
完成：功能（数据）{
var mySwiper2=myApp.swiper（“.swiper-ementa-home”{
间隔：15
});
}
});
var ajaxurl4=“myurl2.php”；
$.ajax({
类型：“POST”，
网址：ajaxurl4，
成功：功能（数据）{
$.each（数据、函数（i、字段）{
var id=field.id\u evento；
var nomeEvento=field.nome_evento；
var imgEvento=field.img_evento；
var字符串=”；
$（“#slider eventos home”）.append（字符串）；
})
},
完成：功能（数据）{
var mySwiper3=myApp.swiper（“.swiper eventos home”{
间隔：15
});
}
});
});
})

印刷品：

• 页面加载时（一切正常）：

• 滚动到最后一张幻灯片（大量空白）：

• 如果我们继续滚动（如果我们继续滚动，它将继续添加空白）：

知道发生了什么吗？

如前所述（），添加：

---

在Swiper初始化部分中，使用SlideOffsetAfter:0，有关更多详细信息，请参见下面的示例：

var swiper=新的swiper（“.swiper容器”{ 幻灯片视图：3， 空间期:30,， SlideOffsetAfter:0， 自由模式：对， 分页：{ el:“.swiper分页”， 可点击：正确， },

---

});也许你的

spaceBetween:15

就是问题所在？即使你的ajax返回空数据，它也会继续附加这些数据。这就是给你空位的原因。验证如果ajax返回为空，则不要向swiper追加数据。@prasannaputtaswamy按照您的建议，我尝试使用此方法，但没有效果。你能告诉我怎么做吗@EduardoJoão是否尝试删除空格？是否检查/验证了两个函数的空/空。

slidesPerView: 'auto'