CODEWITHSUNDEEP
jqueryhtmlcssbxslider
Ylama
Ylama

Reputation: 2489

bxSlider not working on first load for Chrome

So i use bxSlider just as the website shown on this page, thing is on first load the slider arrows show but my images does not show.

On second load (page refresh) it works perfectly fine. This issue is only on Chrome.

Edge, Firefox, IE has no issue displaying slider images on first load.

Now i know the snippet works, i cant duplicate the problem within the snippet but here is a link to the page , click me , MVC not prefer links to external pages, but as said cant duplicate this? Is this a chrome bug, i cant get a fix?

also i used version jquery/1.11.0 as my site does, but as can see bellow, dont think the version is the issue.

<html>
<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider();
    });
  </script>

</head>
<body>

  <div class="slider">
    <div>I am a slide.</div>
    <div>I am another slide.</div>
  </div>

</body>
</html>

Upvotes: 2

Views: 4868

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

It's look like your initialization function $('.slider').bxSlider() is executing before your bxslider.js load...

...so try to initialize your $('.slider').bxSlider() after the page load using $(window).on("load")

$(window).on('load', function() {
  $('.slider').bxSlider();
})

Upvotes: 5

Related Questions