BxSlider is one of the mostly used custom jQuery slider library for the use in the WordPress themes as well as in the WordPress plugins and others too, for the development purposes. While it has many of the useful functionality built within it, but it too lacks in some of the functionality too. Well, on using this jQuery library for your project, one of the disadvantage of this script is that, the slider images and content kept inside it will be flashing or stacking with each other when the site load at first and later on all will be displayed properly on complete page load. So, here we will describe about how to solve the slider images stacking issue in BxSlider when the page loads.
Since, all of the images added in the slider will be loading when the page loads, the images added as the slider while using this library will all be displayed at once. So, the flashing or the stacking of the slider images might be appearing when the web page loads, since, the required script to function it as the slider for the images will not be working until the required script has been fully loaded in your browser while visiting the site having this library used as slider, which could take up some time depending on the connection speed. So, for its remedy, you can perform the following task in your project:
Add the required HTML file
If you have already used some of the custom jQuery library in your projects, then, you may already know that the jQuery library will only effect the divs in which it is described to do so. Similarly, is the case with the BxSlider library. This library too, will only be effecting the divs, where it has been called to take effect on. So, as for an example, here, we have provided you with simple HTML code, in which we will make the use of BxSlider jQuery library:
<li><img src="/images/image-1.jpg" /></li>
<li><img src="/images/image-2.jpg" /></li>
<li><img src="/images/image-3.jpg" /></li>
Add the required CSS tweaks
Now, since, we have provided the required HTML file above, now you just need to copy that code in your project files. Also, we have done nothing on that HTML code at all. It just displays those images at once, ie, all of the images will be stacking with each other, since nothing is being applied to it via any of the CSS code. Hence, now, for the images not to be displayed in your browser, you now can create style file for your project and apply this below provided CSS code in that file:
Add the required script code
Now, after the above code has been applied in your style file, you will see that none of the image will be displayed due to the use of the above provided CSS code. So, now comes the part of the BxSlider script to make the slider images visible. So, you need to create the custom script file for this and then paste this below script code in that file:
Here, what we have done in above custom jQuery script is that, with the above CSS code provided, all of the slider images will not be displayed. But, it seems you are in luck if you are using the BxSlider, as the jQuery slider library for your project since, BxSlider has provided the custom function onSliderLoad, which executes certain task immediately after the slider has been fully loaded. So, here what we have done here is, we have made the visibility of the slider images to be visible, via the jQuery code for applying CSS styling, when the slider has been fully loaded. So, after applying the above mentioned steps, now you will not see the stacking of the slider images while using the BxSlider script for your project.
If you have followed the above tutorial properly and is success on not making the slider images display at once using the BxSlider jQuery library, then, we can assume that you are now able to solve the issue of the slider images stacking with each other, while using the BxSlider jQuery library.