title: Gif loading image Owl Carousel LazyLoad in owl-lazy class?
body: <p>I want to set preloader image in owl carousel2. I have read the docs but i didn't find any information to use preloader image in lazyload plugin option. </p>
  
  <p>here is the plugin website : </p>
  
  <p><a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow noreferrer">https://owlcarousel2.github.io/OwlCarousel2/</a></p>
  
  <p>My Code : </p>
  
  <pre><code>
  &lt;div class="single-product owl-carousel owl-theme"&gt;
    &lt;a href="https://source.unsplash.com/0utRJ1mZoZg/1080x1350" data-fancybox="images"&gt;
      &lt;img data-src="https://source.unsplash.com/0utRJ1mZoZg/600x600" class="img-fluid owl-lazy" /&gt;
    &lt;/a&gt;
  
    &lt;a href="https://source.unsplash.com/aiNU4cA4UzQ/1080x1350" data-fancybox="images"&gt;
      &lt;img data-src="https://source.unsplash.com/aiNU4cA4UzQ/600x600" class="img-fluid owl-lazy" /&gt;
    &lt;/a&gt;
  
    &lt;a href="https://source.unsplash.com/295NLwGdrKM/1080x1350" data-fancybox="images"&gt;
      &lt;img data-src="https://source.unsplash.com/295NLwGdrKM/600x600" class="img-fluid owl-lazy" /&gt;
    &lt;/a&gt;
  
    &lt;a href="https://source.unsplash.com/NzsTFFB6Ng8/1080x1350" data-fancybox="images"&gt;
      &lt;img data-src="https://source.unsplash.com/NzsTFFB6Ng8/600x600" class="img-fluid owl-lazy" /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>$('.single-product').owlCarousel({
   loop : true,
   items : 1,
   nav : false,
   lazyLoad: true,
  });
  </code></pre>
  
  <p>I need to give preloader gif image, for better UX. </p>
  
  <p>Could you please help me?
  Thanks a lot</p>