Question

我使用Swiper Slider作为混合应用程序，我使用带有Framework 7的Phonegap创建。

每张幻灯片都是通过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
                  });
               }
        });


 });
})

打印：

页面加载时（一切正常）：https://gyazo.com/42094ad145607579572eb550a2d22d28
滚动到最后一张幻灯片（大量空格）：https://gyazo.com/64f5ec3b4d9c2e1f77357d2a040ea153
如果我们继续滚动（如果我们继续滚动，则会不断添加空格）：https://gyazo.com/f9e1be36eabbcafdd8767b05a29d2259

知道发生了什么事吗？

Answer 1

如demkovych所说（here, dublicate），添加：

slidesPerView: 'auto'

Answer 2

在“刷卡初始化”部分中，使用 slidesOffsetAfter：0 ，有关更多详细信息，请参见下面的示例：

var swiper = new Swiper（'。swiper-container'，{ slidesPerView：3，间隔：30， slidesOffsetAfter：0， freeMode：true，分页：{ el：“。swiper-pagination”， clickable：是的， }， }）;

Swiper Slider在最后一次幻灯片后创建空格

2 个答案: