How to stop bxslider images from stacking up before Welcome page fully loads

[zaromnia]

Hi, I've included a bxslider on the "Welcome to our store" page. However the images from the slider show stacked before the page fully loads. What would be the easiest way to stop them showing until the page/slider is fully loaded. I'm fairly new to this coding thing so step by step help would be much appreciated. Thanks

[Al Brookbanks]

You could try this.. https://stackoverflow.com/questions/11658605/how-to-get-bxslider-to-hide-the-slides-until-the-page-loads

[zaromnia]

Okay, so I initially followed BSmither's advice on how to add a bxslider by simply pasting code into the Foundation "Welcome to our store" page and that added the bxslider. That's it. I've checked out the link above, but  I have no idea where to paste this:

 

$(document).ready(function(){ $('.mySlider').show().bxSlider({ slideWidth: 160, minSlides: 2, maxSlides: 5, preloadImages: 'all' }); });

 

Sorry I'm so stoopid but I have no excuse...

[bsmither]

Having followed my instruction to add a specific instance of the BXSlider into the Homepage document, you may have this:

In admin, Documents, click the Edit icon for the document identified as the homepage document.

On the Content tab, switch to Source mode.

Find something similar to:
<ul class="bxslider_homepage">

Change this by adding only the style="display:none;" part:
<ul class="bxslider_homepage" style="display:none;">

Find something similar to:
$(window).load(function(){ $('.bxslider_homepage').bxSlider({auto:true,captions:true}); });

Change this by adding only the .show() part:
$(window).load(function(){ $('.bxslider_homepage').show().bxSlider({auto:true,captions:true}); });

We initially tell the browser to suppress showing the list of images. After the window loads, the BXSlider functionality is triggered, which converts the list to a slider.

But, since the images for the slider are not shown, the added show() is used to make them visible then instantly converted to a slider.

[zaromnia]

bsmither, thank you most kindly, have managed to get it to work. For some reason though, my images do not stretch to the entire width of the slider. There's an overlap on the left. Any ideas? The slider can be seen here

[bsmither]

This is what my browser has for the HTML sent:

<ul banner1.png="" class="bxslider_homepage" style="display:none;">
	<li><img src="images/homebxslider/Banner1.png"/></li>
	<li><img src="images/homebxslider/Banner2.png"/></li>
	<li><img src="images/homebxslider/Banner3.png" title="" /></li>
</ul>

The 'banner1.png' attribute shouldn't be there, but probably isn't causing any damage.

I also see this:

$(document).foundation({equalizer:{equalize_on_stack:true}});
$('.bxslider_homepage').show().bxSlider({auto:true,captions:true}) .show().bxSlider({auto:true,captions:true});
$('.chzn-select').chosen({width:"100%",search_contains:true});

The second line has too much code, although I do not know if this is the problem. That line should be:

$('.bxslider_homepage').show().bxSlider({auto:true,captions:true});

 

[zaromnia]

I"ve removed  the extra code, but the  problem  persists. 

Please explain: 

4 hours ago, bsmither said:

The 'banner1.png' attribute shouldn't be there

Banner1.png is the image name of the first slide.

[bsmither]

In this statement:

<ul banner1.png="" class="bxslider_homepage" style="display:none;">

The code banner1.png="" is not necessary.