Elementor slider background images

  • Hi Florian,

    Thanks for all your hard work. I am testing this plugin on a site that uses Elementor and I specifically need the main slider background images to be lazyloaded. I added the class lazyload to the slider element, and I turned on the settings for Include lazysizes unveilhooks plugin and Enable lazy loading for inline background images. But I keep getting the ‘defer offscreen images’ warning from GTMetrix and Lighthouse. Would you be able to help me figure out how to get it to work with this site?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hi Justin,

    the slider does not insert the background images in a way that the Lazy Loader background image feature can handle, sorry.

    What you could try is add the lazyload class to the .swiper-slide-bg elements that display the image for each slide. If you send me a copy of the Elementor plugin (you can find my email address here: https://florianbrinkmann.com/en/contact/), I can take a look at the code and, if it has a filter for that, post a code snippet that adds the class name.

    Best,
    Florian

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hi Justin,

    thanks again for sending me the Elementor files. There is no filter to directly modify the markup, but that seems not to be a problem. I was on my way to a more complex solution when I noticed, it seems to be enough to just hide an element via CSS, and the browser will not load the background image. The following snippet worked for me, I added it via the custom CSS box in the Customizer:

    
.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) .swiper-slide-bg {
	display: none;
}

    I tested it with Firefox and Chrome, and there it worked.

    Hope that helps!
    Best,
    Florian

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Elementor slider background images’ is closed to new replies.