1

I have uploaded a website I am developing which is here: http://derbyshiregas.co.uk and as you can see when the home page first loads the slider has a display glitch and shows it all of the slides before loading correctly. This only seems to happen on the desktop view though.

Please can someone take a look and let me know what I can try to fix this?

1

This is standard behavior with javascript that is deferred or loaded in the footer.

All the slides load in, and don't get told to "be sliders" until the whole page has loaded.

You can hide them with CSS first:

#section-slider .single-slide-wrap {
    display: none;
}

And you can have the first slide be shown if you want:

#section-slider .single-slide-wrap:first-child {
    display: block;
}

Notice the same thing is happening with your .tab-pane's further down the page, so you could add those in as well:

#section-services .tab-pane,
#section-slider .single-slide-wrap {
    display: none;
}

#section-services .tab-pane:first-child,
#section-slider .single-slide-wrap:first-child {
    display: block;
}

Since the CSS is loaded in the header, the styles will be applied well before the javascript is loaded and kick in.

  • Thanks for your answer, yep the deferred JavaScript could explain it, I forgot about that. So if I add this CSS later when I get home should this correct the issue I’m seeing? :) – Harvey Mar 2 '18 at 20:36
  • Short answer: Yes it should! Long answer: When you have code that could benefit (lol) from render-blocking javascript, this is a semi-standard way to fix it, it should fix the issue for you because it will make sure all slides and panes are hidden except for the first one, and once the JS is loaded it will apply the appropriate display value to them, just make sure the CSS doesn't have too high a specificity to override the inline styles provided by your javascript – Xhynk Mar 2 '18 at 20:46
  • I have just added the CSS if you take a look here derbyshiregas.co.uk, looks a lot better now. Only issue is the slider seems to load as a different size and then re renders larger. Any ideas how I can fix this? – Harvey Mar 3 '18 at 10:43
  • It's because the slides end up with a lot of inline-styles (and the slider gets wrapped in 2 new containers) once the JS kicks in. You can try adding #section-slider .single-slide-wrap:first-child { height: 100vh; } to simulate the full screen slider effect (note this should be a new statement because the previous :first-child one in my answer will target the tab panes as well! – Xhynk Mar 3 '18 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.