Elementor Slider Pro with Swiper Slider issues using background images using CSS instead of HTML

elementor-swiper-slider.md

See Swiper Slider Lazy Loading example. The Elementor Slider Widget Pro uses Swiper and basic setup uses background images with CSS [link]. They do not use HTML tags like <div> or <img> with src, data-src or srcset . To use lazy loading HTML markup has to be changed as shown in example.

With this HTML markup that we could also use Imagify to load webP images when possible using swapping with JavaScript. Unfortunately this is not possible with the current setup of Elementor Slider Pro.

Can be done server side on Nginx using

location ~* ^(/.+)\.(jpg|jpeg|jpe|png|gif)$ {
  add_header Vary Accept;

  if ($http_accept ~* "webp"){
    set $imwebp A;
  }
  if (-f $request_filename.webp) {
    set $imwebp  "${imwebp}B";
  }
  if ($imwebp = AB) {
    rewrite ^(.*) $1.webp;
  }
}