jquery 滑动器滑块在最后一张幻灯片后创建空格

tquggr8v  于 2023-02-21  发布在  jQuery
关注(0)|答案(3)|浏览(158)

我正在使用Swiper Slider开发一个混合应用程序,我正在使用Phonegap和Framework 7创建这个应用程序。
每张幻灯片都包含通过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
                  });
               }
        });

 });
})

图纸:

知道发生什么事了吗?

yacmzcpb

yacmzcpb1#

在扫掠器初始化部分,使用slidesOffsetAfter:0,更多详细信息请参见以下示例:

<script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      slidesOffsetAfter:0,
      freeMode: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
klr1opcd

klr1opcd2#

demkovych所示(here, dublicate),添加:

slidesPerView: 'auto'
lawou6xi

lawou6xi3#

在代码的var mySwiper2var mySwiper3部分中,我认为应该尝试添加loopFillGroupBlank: False,,如下所示
shell :var mySwiper3

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

相关问题