Fullscreen slider on homepage

[user9235]

hey guys
Hope you’re well

I’d like the slider to be full screen if possible
What custom CSS to i put in?

This is the test page:

new — JPAV.co

I’d like the images to appear fullsize:
like this - https://www.jpav.co/

I like the setting i currently have above, but the plugin i used does not allow for random order of images
So on the new page i plan to use the random order setting once i know how to make the images full screen

Thanks so much
I really appreciate it

James

[Max]

Happy to see you in our Community! Welcome @user9235

Sure, I’ll check it with our devs and will get back to you once I receive a response from them

[user9235]

Thanks so much
Really appreciate it

[Max]

Please try to replace the widget’s installation code on your website with this code:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<script>
    (() => {
        const WIDGET_ID = '938c7a90-a049-4812-910e-44eac142d44a';

        const addWidget = () => {
            const widget = document.createElement('div');
            widget.classList.add(`elfsight-app-${WIDGET_ID}`);

            setTimeout(() => document.body.prepend(widget), 100);
        };

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', addWidget);
        } else {
            addWidget();
        }
    })();
</script>

Check it out and let me know if it worked

[user9235]

Hi there
Thanks so much for your help, i really appreciate it

It has definitely improved things, but the image now has a blank section below - can this be altered?

Thanks again

James

[Max]

Oh, I am sorry about this inconvenience!

We’ll double-check things and will get back to you a bit later

[Max]

@user9235 Please try to use this code instead:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<script>
    (() => {
        const WIDGET_ID = '938c7a90-a049-4812-910e-44eac142d44a';
        const addWidget = () => {
            const widget = document.createElement('div');
            widget.classList.add(`elfsight-app-${WIDGET_ID}`);
            setTimeout(() => {
  const page = document.querySelector('#page');
page.replaceWith(widget);
}, 100);
        };
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', addWidget);
        } else {
            addWidget();
        }
    })();
</script>

[user9235]

Thanks Max
Really appreciate your help

Unfortunately copying this code into the ‘code’ section just brings up a blank section?
No images appear at all now

new — JPAV.co

Sorry if i misunderstood the steps

James

[Max]

Oh, I am sorry, the last part of the code wasn’t successfully copied!

The script tag was missing in the end. Please add this version of the code to your website and let me know if it worked:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<script>
    (() => {
        const WIDGET_ID = '938c7a90-a049-4812-910e-44eac142d44a';
        const addWidget = () => {
            const widget = document.createElement('div');
            widget.classList.add(`elfsight-app-${WIDGET_ID}`);
            setTimeout(() => {
  const page = document.querySelector('#page');
page.replaceWith(widget);
}, 100);
        };
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', addWidget);
        } else {
            addWidget();
        }
    })();
</script>

[user9235]

Thanks so much for the fast reply Max
Really appreciate it

This worked, but unfortunately It still looks the same (with the cutoff bottom)
Screenshot attached

Thanks

[Max]

I’ve checked your website and it looks fine in my end:

Could you please check your website in incognito mode and let me know if the issue still persists?