Cannot get slider to be full screen on load

Hi,

Please try to set the Width option to 100vw and the Height to 100vh. If the issue still occurs, try this custom CSS:

.sp-image {
    width: 100% !important;
    object-fit: cover;
}

Best,
David

@bqworks Thanks for your reply. I tried the 100vw + 100vh but it actually made it worse – the images would be even smaller, for some reason.

Adding the code snippet on top of that, the images will at first appear too small, with the width matching the viewport width, and not covering the viewport as I’d like – then, after the page finishes loading, it pops into place in the proper way. The jump is jarring, and since this is the homepage it’s important that it look seamless. This is most apparent on mobile and smaller window sizes.

Here is a staging site where I’ve put the changes you suggested: https://wordpress.highchairdesign.com/

To clarify, I want the images to cover the entire viewport (like background-size: cover in css).

@bqworks Do you have a live example where the “cover” image scale option is working properly with a “full window” size? If you can share that with me I might be able to resolve the issue.

Hi, Kay. Sorry for the late reply! I will take a look at this issue soon and get back to you.

Best,
David

Hi, Kay. Please replace the previous custom CSS with this one:

.sp-image {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.sp-slide {
    overflow: hidden;
}

By default, the slider will try to use JavaScript to cover the area and center the image, and for this it does some calculations. Certain contexts might interfere with these calculations and affect the result. The above CSS should do the same, but since it’s only CSS, it should be more reliable.

Also, a few important notes:

The images need to be loaded before they can be centred/positioned properly. It’s not possible to know an image’s size from the start and position it accordingly, which causes that jump. In order to prevent that, you could hide the image until it’s loaded and only make it visible then. For this you can use this CSS:

.sp-image {
    opacity: 0 !important;
}

.sp-image[style*="width"] {
    opacity: 1 !important;
}

At the moment your images take a long time to load because they all load simultaneously. You should enable Lazy Loading, which will load them only when they are needed. This saves bandwidth and it greatly improves the loading time of the selected slide image.

You might also try to optimize the file size of the images themselves, as they seem to be much larger than they need to be. If you export them for web and maybe reduce their quality a little, so that it’s not noticeable, you could achieve much smaller file sizes.

Best,
David