zaromnia Posted October 5, 2017 Share Posted October 5, 2017 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 Quote Link to comment Share on other sites More sharing options...
Al Brookbanks Posted October 5, 2017 Share Posted October 5, 2017 You could try this.. https://stackoverflow.com/questions/11658605/how-to-get-bxslider-to-hide-the-slides-until-the-page-loads Quote Link to comment Share on other sites More sharing options...
zaromnia Posted October 5, 2017 Author Share Posted October 5, 2017 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... Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 5, 2017 Share Posted October 5, 2017 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. Quote Link to comment Share on other sites More sharing options...
zaromnia Posted October 18, 2017 Author Share Posted October 18, 2017 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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 18, 2017 Share Posted October 18, 2017 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}); Quote Link to comment Share on other sites More sharing options...
zaromnia Posted October 18, 2017 Author Share Posted October 18, 2017 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 19, 2017 Share Posted October 19, 2017 In this statement: <ul banner1.png="" class="bxslider_homepage" style="display:none;"> The code banner1.png="" is not necessary. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.