Hello,
I’m trying to recreate a slider similar to the “COLOR SCHEME LIGHT SLIDER”
demo shown here: https://woodmart.xtemos.com/sliders/ (XTEMOS ELEMENT
section).
I built my own single-slide hero slider first and noticed the image causes
a visible layout shift/jump when it loads on the live site — the content
appears to resize or reposition briefly as the image finishes loading,
even though the slider height is set to a fixed 600px on desktop.
To rule out a configuration mistake on my end, I also imported the
official “Color Scheme Light Slider” template directly from your library
— and the exact same jumping/shifting happens with the imported template
too, unmodified.
I originally added the image via the “Image” option in the slide settings.
Questions:
1. For a slide with a fixed custom height, is it recommended to use the
“Background” option instead of “Image” to avoid this kind of layout
shift? My understanding is that Background images are always sized to
the container via CSS background-size, while the Image option might
not reserve space the same way — is that correct?
2. If “Image” is still preferred (e.g. for responsive srcset support),
is there a setting to make sure width/height are properly reserved to
prevent layout shift (CLS)?
3. I already excluded the image from lazy loading and set it as the
preloaded LCP image, but the jump/shift still happens — could this be
unrelated to lazy loading and purely a missing width/height reservation
issue?
4. Since this also happens with your own unmodified template import, could
this be a known issue with this particular slider template?
Thank you for your guidance.
.
