2

I created a slider using Matrix, consisting of 3 slides (images and text). On load, the content for all 3 slides are shown, stacked. Then after a second the slider functions normally. Has anyone faced this problem, and how can this be fixed?

1

This isn't a Matrix bug, this is the way most sliders work. It's actually caused by this bit of code:

$(document).ready(function(){ ... });

What this says is, wait for the browser to be finished handling the page, then run the code in between the { and }. The reason for this is that starting to apply effects etc. on the document before your browser is done rendering it, could cause unexpected behavior (for example, most sliders interpret the height of slides, but if your fonts or images aren't fully loaded yet that'll be inaccurate).

Does that help?

2
  • Very helpful, however I changed the line to "$(function(){" and it made no difference. I also didn't have any luck with getting rid of the function line all together.
    – Allison S.
    Jun 13 '13 at 21:09
  • What slider-script are you using?
    – Steven
    Jun 14 '13 at 6:14
1

What Steven said. Generally, the way I take care of this is that I "hide" the slider element (div) using css during page load. Then, when Javascript kicks in, it removes that class from the slider div, making it visible after everything is loaded on that page.

EDIT: as Jean said, you can also keep only the first slide visible or set the height of the container to avoid content "snap"

You can see this on one of the site I built. The script I used on there is called flexslider and it does it by default.

2
  • 1
    I approach it pretty much the same way, but I hide all but the first element - just adding a unique class to the first slider element (if row_count == "1" for example) - then you get the properly interpreted height/width of the slide element while suppressing the visibility of the other elements, eliminating the content "snap". Jun 14 '13 at 10:24
  • This is probably the best solution.
    – CreateSean
    Jun 14 '13 at 15:11

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.