• Skip to content
  • Skip to primary sidebar

Hire Jordan Smith

  • About
  • Portfolio
    ▼
    • Web Design
    • Logo Design
  • Services
    ▼
    • All Services
    • Web Design
    • Logo Design
    • SEO Services
    • Web Hosting
  • Reviews
  • FAQ
  • Blog
  • Hire Me
  • About
  • Portfolio
    • Web Design
    • Logo Design
  • Services
    • All Services
    • Web Design
    • Logo Design
    • SEO Services
    • Web Hosting
  • Reviews
  • FAQ
  • Blog
  • Hire Me
HomeBlog Web DevelopmentHow to make BxSlider hide all slides until the page loads

How to make BxSlider hide all slides until the page loads

Share
Tweet
Share
+1
Pin
0 Shares

This is the simplest and cleanest way to fix the issue of BxSlider slides all showing up in a bunch when the page loads.

First we’ll add a div around the default bxslider unordered list. You’re code might look different than this but the same basic structure should be there.

<div class="bxslider-wrap">
<ul class="bxslider">
<li>Image / Content</li>
<li>Image / Content</li>
<li>Image / Content</li>
</ul>
</div>
view raw how-make-bxslider-hide-all-slides-until-page-loads.html hosted with ❤ by GitHub

Next, we’ll add some css to hide the entire slider by default when the page loads:

.bxslider-wrap { visibility: hidden; }
view raw how-make-bxslider-hide-all-slides-until-page-loads.css hosted with ❤ by GitHub

Lastly, we will set the slider visibility to visible via jQuery so that when the slider is finished loading it will display without the mess.

jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
onSliderLoad: function(){
$(".bxslider-wrap").css("visibility", "visible");
}
});
});
view raw how-make-bxslider-hide-all-slides-until-page-loads.js hosted with ❤ by GitHub

That’s it! Hope this helps!

Share
Tweet
Share
+1
Pin
0 Shares

Related Posts

  • Redirect WordPress Registration page to a Custom Registration Page

    I'm working on a project where we created a custom registration form with Gravity Forms with a custom user role assigned when they registered. As a result, I needed a way…

  • How to check if page is parent, child or ancestor of current page

    Found these snippets on CSS Tricks while searching for a way to target both the parent and child page in order to pull data from the parent to output to…

  • How to Get the Current Page URL with PHP

    I worked on a project recently where I needed to get the url of the current page dynamically then add it to a body class. The first part of this…

  • How to replace bxSlider controls with Font Awesome icons

    Have you ever wondering if you could replace the bxSlider default controls text, which is Prev / Next, with Font Awesome icons. It turns out it's very simple but I…

  • How to change the WooCommerce checkout page forms

    I had a client recently request to change some of the default WooCommerce checkout page field labels and placeholders. Fortunately, WooCommerce provides a handy filter that makes this easy. The woocommerce_checkout_fields…

Reader Interactions

Comments

  1. Mohsin says

    August 2, 2015 at 5:22 am

    Thank You so much 🙂

    Reply
  2. Somedutta Ghosh says

    August 4, 2015 at 8:24 am

    Thanks! That helped.

    Reply
  3. Alex says

    August 14, 2015 at 6:44 pm

    Thanks, super solution!

    Reply
    • Jordan says

      August 31, 2015 at 9:36 pm

      Glad it helped Alex!

      Reply
  4. Michelle says

    September 9, 2015 at 3:26 pm

    This is probably a crazy question but… where does .bxslider-wrap { visibility: hidden; } . In the html doc? in a js file?

    Reply
    • Jordan says

      September 9, 2015 at 5:53 pm

      Hi Michelle,

      .bxslider-wrap { visibility: hidden; } is CSS so the best place for it is in the styles.css file for your theme or any stylesheet being enqueued on that page.

      Thanks for reaching out!

      Reply
  5. Sean Vandenberg says

    June 30, 2016 at 2:08 pm

    Thanks, Jordan! This is a very simple and smart solution. Appreciate you sharing it.

    Reply
    • Jordan says

      July 4, 2016 at 5:13 pm

      Sure thing Sean!

      Reply
  6. simplen says

    July 7, 2016 at 12:18 pm

    you da man

    Reply
    • Jordan says

      July 7, 2016 at 2:33 pm

      Thanks! Glad it helped you!

      Reply
  7. Anaz Bilal says

    July 11, 2016 at 10:18 am

    Very thankzz Jordan ..

    Reply
  8. Arjen DeVries says

    September 27, 2016 at 11:33 pm

    Simple and elegant! Thank you!

    Reply
    • Jordan says

      September 28, 2016 at 4:14 am

      Sure thing! Glad it helped you out!

      Reply
  9. Chris says

    December 14, 2016 at 9:54 pm

    Hi Jordan,

    Thank you. This is a nice, quick solution.
    Worked perfectly!

    Reply
    • Jordan says

      December 22, 2016 at 7:50 pm

      Sure thing!

      Reply
  10. Shrujal Goswami says

    February 23, 2017 at 5:18 am

    Thank you Jordan..
    very happy and quick solution..

    Reply
    • Jordan says

      February 23, 2017 at 7:32 am

      Awesome Shrujal, glad it helped!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Categories

  • SEO
  • Web Design
  • Web Development
    • ACF Development
    • BX Slider
    • Genesis Development
    • Gravity Forms Development
    • jQuery Development
    • Materialize Development
    • WooCommerce Development
    • WordPress Development

Quick Connect

Phone
912-656-6434

Email
jordan@hirejordansmith.com

Address
Hire Jordan Smith, LLC.
580 White Oak Lane
Richmond Hill, GA 31324

  • Facebook
  • Twitter
  • Linkedin
  • Google
  • About
  • Portfolio
  • Services
  • Savannah Website Design
  • Reviews
  • FAQ
  • Blog
  • Hire Me
  • Sitemap

© 2019 Hire Jordan Smith