After implementing bxSlider on my website following the instructions from this page, I encountered an issue where the slider arrows would display on the first load but the images themselves would not appear.
Interestingly, upon a second load (refreshing the page), everything worked perfectly fine. This peculiar problem seems to be isolated to Chrome.
Other browsers such as Edge, Firefox, and IE have no trouble displaying the slider images on the initial load.
While the provided snippet works flawlessly, I'm unable to replicate the problem within it. Here is a link to the actual page: click here. Although MVC does not prefer external links, I am puzzled by this behavior. Could this be a Chrome bug that has no immediate fix?
I also made use of version jquery/1.11.0 for my site, which aligns with the resources used in the code snippet below. It appears that the issue may not be related to the jQuery version either.
<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>