Infinite Scroll with Swiper added dynamically problem

I am using the Infinite Scroll to add more swiper sliders with their slides on scroll down…

the problem it is that the swiper is added but data-background is not rendered after the swiper is added to the DOM… also lazy loading is not working so i ended up with this html code the same after init the new swiper added:

< div class=“swiper-slide swiper-lazy ease” data-background=“image.jpg”>

second problem any link onclick that is a text over the image stop responding properly after added… like losing focus and i have to click multiple times so the link it is working again…

this is my code method:

  loadMore: function () {
    var self = this;
    var $ = self.$$;
    if (!self.allowInfinite) return;
    self.allowInfinite = false;


    setTimeout(function () {
      if (self.lastItem >= 200) {
        $(self.$el).find('.preloader').remove();
        return;
      }

      var html = '';
      var hotels = app.data.hotels;

      console.log(self.lastItem);

      for (var i = self.lastItem + 1; i <= self.lastItem + 5; i++) {
        html += '<div class="margin-top">';
        html += '<div data-pagination="{"el": ".swiper-pagination"}" data-navigation="{"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}" data-lazy="{"enabled": true}" class="swiper-container hotels swiper-init swiper-lazy" data-space-between="0" data-slides-per-view="1" data-slide-to-clicked-slide="true" data-loop="false">';
        html += '<div class="swiper-wrapper">';

        html += '<div class="swiper-slide swiper-lazy ease" data-background="image.jpg">';
        html += '<div class="preloader swiper-lazy-preloader"></div>';

         html += '<h2 class="centered">';
         html += '<a href="/hotelInfo/'+id+'/'+(i+1)+'/">';
         html += '<button class="col button button-small button-round button-outline color-white font-Ub">Details</button>';
         html += '</a>';
         html += '</h2>';

         html += '</div>';
         html += '</div>';
         html += '</div>';
         html += '</div>';

      }

      $(self.$el).find('.hotels-list').append(html);

      //I init every new added swiper here
      $(".swiper-container.all").each(function(index, element){
          var $this = $(this);
          $this.addClass("instance-" + index);
          var swiper = new Swiper(".instance-" + index, {
          });
      });

      self.lastItem += 5;

      self.allowInfinite = true;
    }, 1000);

  },

any solution for this to work properly?
thanks

I tried to use template7 but the problem the template7 does not work in this case so I have to add the element to the DOM manually like shown above

any solutions for the issues mentioned above
thanks Vladimir!

No, it won’t work in this case, because such swiper will be added after page init, so you need to init these swipers manually, using app.swiper.create method

1 Like

the reason to use swiper it is because each swiper it is a unique hotel with images and information on click… so everytime i go down the infinite scroll must load another swiper with images of the next hotels…

I will try to use the method you mention to solve this issue with lazy loading with dynamic added swiper galleries… and behavior…

is there any documentation about this method online? app.swiper.create? or can you send me a sample of use with the options?

here online i do not find it
https://v1.framework7.io/docs/swiper.html

to init them after added i am using now:

  $(".swiper-container.all").each(function(index, element){
      var $this = $(this);
      $this.addClass("instance-" + index);
      var swiper = new Swiper(".instance-" + index, {
      });
  });

it works to init the swipers but it does not work for the lazy loading of images with data-background attribute…

thanks

I found another old link online
https://framework7.io/docs/swiper.html

and after I add the swiper where html= has the swiper html code

      $(self.$el).find('.hotels').append(html);

I run the following code using app.swiper.create but the image it is not displayed anyway something with the data-background and lazy loading not working using this method… what am i doing wrong?

the swiper is added but the images does not load with lazy loading that have data-background attribute…

      $(".swiper-container.hotels").each(function(index, element){
          var $this = $(this);
          $this.addClass("instance-" + index);
          var swiper = app.swiper.create(".instance-" + index, {
          });

      });

now it works!!! I added the parameters of the HTML in the options of the swiper like below and now it is working perfect I guess!!!

here the code:

      $(".swiper-container.hotels").each(function(index, element){
          var $this = $(this);
          $this.addClass("instance-" + index);

          var swiper = app.swiper.create(".instance-" + index, {
              spaceBetween: 0,
              slidesPerView: 1,
              slideToClickedSlide: true,
              loop: false,
              lazy: true
          });

      });

the only issue is that the lazy loading does not show the loading spinner when loading the image with this method but i think it is a thing that has to do with the use of infinite scroller and lazy loading too that use the same loading spinner…

if there is a thing to fix it to look better it will be awesome!!!

big thanks Vladimir!!

Swiper, has own lazy loading logic, so it should load lazy slides in other slides, first slide will be loaded by default

1 Like

OK I will check that again!!! I see if this is working it is great to know how the things work!!
best regards Vladimir and thanks