title: Swiper lazy load not working (troubleshooting)
body: <p>I hope you could help me with this troubleshooting. I have an Angular 8 application in which I use <a href="https://www.npmjs.com/package/swiper" rel="nofollow noreferrer" title="NPM library">swiper</a>. I have tried to implement the lazy load configuration in order to lazy load the images in the swiper items, but it loads all of them and works like I've configured nothing about lazy load.</p>
  
  <p>See <a href="https://swiperjs.com/api/#lazy" rel="nofollow noreferrer">https://swiperjs.com/api/#lazy</a></p>
  
  <p>My swiper configuration in <strong>typescript</strong> is this one:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.mySwiper = new Swiper('.swiper-container' {
        //some configuration. Here it comes the important part
        //...
        watchSlidesVisibility : true,
        preloadImages: false,
        lazy: true,
        breakpoints: {// Responsive
              blablabla, more than 1 per view.
        }
  }
  </code></pre>
  
  <p>Now, the <strong>html</strong>, in which I would like to point out that I use a component for each item, so maybe it's what makes it not working:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="swiper-container" [ngClass]="sliderConfig.name"&gt;
      &lt;div class="swiper-wrapper" *ngIf="!sourceImages"&gt;&lt;!--A comprobation that really doesn't matter here--&gt;
          &lt;div *ngFor="let model of models" class="swiper-slide"&gt;
              &lt;app-item [model]="model"&gt;&lt;/app-item&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Add Pagination --&gt;
      &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
      &lt;!-- Add Arrows --&gt;
      &lt;div class="swiper-button-next"&gt;&lt;img src="../../../../../assets/images/gallery/swiper-button.svg" alt="Next"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;img src="../../../../../assets/images/gallery/swiper-button.svg" alt="Prev"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And finally, the <strong>item</strong> itself:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="swiper-slide" (click)="viewproject()"&gt;
      &lt;div class="wrapper"&gt;
          &lt;img *ngIf="model" data-src="{{link}}" class="swiper-lazy"/&gt;
          &lt;div class="swiper-lazy-preloader"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It behaves like I did nothing, I mean, it load the images in every single item, wether it should or not, and I've tried removing cache, but it still (doesn't) works the same way. </p>