I have some carousels on a website with some lazy loadings such as the image loads only when the user moves the carousel or click the arrow. (It doesn't move by itself)

<div class="owl-carousel">
    <img class="owl-lazy" src="#" data-src="http://.....image.jpg" alt="Image 1" />
    <img class="owl-lazy" src="#" data-src="http://.....image.jpg" alt="Image 2" />
</div>

Problem is, img src attribute is only populated on this event. And this event occurs only on the user action. But as my data-src is not read as an image by Googlebot, and as my src contains "#" on page loading, Google indexes only the first image of each carousel (which are visible on loading), event if all my images are in my sitemap. (Search Console says the sitemap contains all the images, but not in Google index)

Do you have any idea on how I would be able to reference all these images in Google  ?

Thank you !

I have some carousels on a website with some lazy loadings such as the image loads only when the user moves the carousel or click the arrow. (It doesn't move by itself.)

<div class="owl-carousel">
    <img class="owl-lazy" src="#" data-src="http://.....image.jpg" alt="Image 1" />
    <img class="owl-lazy" src="#" data-src="http://.....image.jpg" alt="Image 2" />
</div>

Problem is, img src attribute is only populated on this event. And this event occurs only on the user action. But as my data-src is not read as an image by Googlebot, and as my src contains # on page loading, Google indexes only the first image of each carousel (which are visible on loading), event if all my images are in my sitemap. (Search Console says the sitemap contains all the images, but not in Google index)

Do you have any idea on how I would be able to reference all these images in Google?