Show slide only after loading

Asked

Viewed 125 times

0

I would like some help because when it loads my page, my slide gets all messed up, and only after about 5 seconds it goes back to normal and it ends up causing a bad impression.

I’d like something with jquery or ajax that showed my slide only after loaded all of it.

I’m using a slide reference jquery bxslider

 <div class="slider-area">
        <!-- Slider -->
        <div class="block-slider block-slider4">
            <ul class="" id="bxslider-home4">
                <li>
                    <img src="img/h4-slide.png" alt="Slide">
                    <div class="caption-group">
                        <h2 class="caption title">
                            iPhone <span class="primary">6 <strong>Plus</strong></span>
                        </h2>
                        <h4 class="caption subtitle">Dual SIM</h4>
                        <a class="caption button-radius" href="#"><span class="icon"></span>Shop now</a>
                    </div>
                </li>
                <li><img src="img/h4-slide2.png" alt="Slide">
                    <div class="caption-group">
                        <h2 class="caption title">
                            by one, get one <span class="primary">50% <strong>off</strong></span>
                        </h2>
                        <h4 class="caption subtitle">school supplies & backpacks.*</h4>
                        <a class="caption button-radius" href="#"><span class="icon"></span>Shop now</a>
                    </div>
                </li>
                <li><img src="img/h4-slide3.png" alt="Slide">
                    <div class="caption-group">
                        <h2 class="caption title">
                            Apple <span class="primary">Store <strong>Ipod</strong></span>
                        </h2>
                        <h4 class="caption subtitle">Select Item</h4>
                        <a class="caption button-radius" href="#"><span class="icon"></span>Shop now</a>
                    </div>
                </li>
                <li><img src="img/h4-slide4.png" alt="Slide">
                    <div class="caption-group">
                      <h2 class="caption title">
                            Apple <span class="primary">Store <strong>Ipod</strong></span>
                        </h2>
                        <h4 class="caption subtitle">& Phone</h4>
                        <a class="caption button-radius" href="#"><span class="icon"></span>Shop now</a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- ./Slider -->
</div> <!-- End slider area -->

Thank you in advance

jquery bxslider

1 answer

0

Run your slide only when the page finishes loading.

jQuery(document).ready(function($){
   $('.bxslider').bxSlider();
});

  • Hello Kayo! I don’t know what the reason but I tried several ways even this yours, but it doesn’t work I used until $.noConflict();

  • I was watching here and I actually need this slide to load as fast as possible, because it only works after the page loads and while it gets all messed up on the screen.... = ( I needed it to disappear and show only after fully loaded

  • Friend puts it to be loaded in the header.

Browser other questions tagged jquery bxslider

You are not signed in. Login or sign up in order to post.