CODEWITHSUNDEEP
javascriptjqueryphonegaphtml-framework-7swiper.js
Eduardo João
Eduardo João

Reputation: 107

Swiper Slider is creating blank spaces after last slide

I'm using Swiper Slider for a hybrid app i'm creating using Phonegap with Framework 7.

Each slide is made with dynamic content that is being brought through an Ajax call.

The problem is that i have two Sliders in the same page, and when i reach the last slide on both of them, a huge blank space starts appearing and the more we slide with our finger, the more blank space it will create.

I will leave here some prints and the relevant bits of code.

My HTML File:

    <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>

My JS File:

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
                  });
               }
        });


 });
})

Prints:

Any idea what's going on?

Upvotes: 5

Views: 16061

Answers (5)

uneven
uneven

Reputation: 1

For me, removing the virtual: true parameter I had previously added solved the problem.

Upvotes: 0

Okan Pınar
Okan Pınar

Reputation: 89

In Vue.js (and likely in other frameworks as well), creating a loop directly from a source array and modifying that array on the fly can lead to repeated blank elements. As a solution, I am calling following function after every modification.

function clearEmptyElements() {
  const elements = document.querySelectorAll('.swiper-slide-blank');
  elements.forEach(el => el.remove());
  swiperInstance.update();
}

Upvotes: 0

eManuel
eManuel

Reputation: 23

I think you should try to add loopFillGroupBlank: false, like this:

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

Upvotes: 0

Baseer Ebadi
Baseer Ebadi

Reputation: 173

In your Swiper Initialization portion, use slidesOffsetAfter: 0, See bellow example for more details:

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

Upvotes: 5

Dunot
Dunot

Reputation: 308

As demkovych said (here, dublicate), add:

slidesPerView: 'auto'

Upvotes: 3

Related Questions