title: SwiperJS lazy loading - Image not displaying when using data-src as the guide says
body: <p>I have been struggeling trying to implement SwiperJS to my Statamic 3 project.</p>
  <p>I have a working carousel/slider that when not using data-src and lazy loading works perfectly fine. But as soon as I try to implement lazy loading following the guide on their website. I get either a white image/background with an infinite loader or a white image/background and no loader.</p>
  <p>here is my code:</p>
  <p>HTML (the images come from a antlers foreach):</p>
  <pre><code>&lt;div class=&quot;flex flex-col w-1/3 p-2&quot;&gt;
      &lt;div class=&quot;h-full w-full swiper-container&quot;&gt;
          &lt;div class=&quot;h-48 swiper-wrapper&quot;&gt;
              {{ foreach:photos }}
                  &lt;div class=&quot;swiper-slide&quot;&gt;
                      &lt;img data-src=&quot;{{ value:url }}&quot; class=&quot;w-full h-full object-cover object-center swiper-lazy&quot;&gt;
                      &lt;div class=&quot;swiper-lazy-preloader&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
              {{ /foreach:photos}}
          &lt;/div&gt;
          &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My JS:</p>
  <pre><code>// core version + navigation, pagination modules:
  import Swiper, { Navigation, Pagination } from 'swiper';
  import 'swiper/swiper-bundle.css';
  
  // configure Swiper to use modules
  Swiper.use([Navigation, Pagination]);
  
  
  var mySwiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 0,
      slidesPerGroup: 1,
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      pagination: {
          el: '.swiper-pagination'
      },
      mousewheel: false,
      keyboard: true,
      loop: true,
      parallax: true,
      grabCursor: true,
  
      // Disable preloading of all images
      preloadImages: false,
      // Enable lazy loading
      lazy: {
          loadPrevNext: true,
      },
  });
  </code></pre>
  <p>Current result:
  <a href="https://i.stack.imgur.com/znPD9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/znPD9.png" alt="Result" /></a></p>
  <p>Anyone know why my images are not being rendered?</p>
  <p>Kind regards,
  Robbert</p>