bxslider images are not loading when used inside jquery ui tabs

Question

I am having issues with the images failing to load both in jquery ui and no ui tabs. Strangely enough, on opera, chrome and firefox, the images will load if I open the developer tools console and when I move the console up or down. The images totally fail in IE 11

Here is a live demo:

http://inetwebdesign.com/bxslider2/jquery-ui-tabs-accordion2.html

Any help would be greatly appreciated.

Regards, umb

Answer 1

DEMO of bxslider inside jquery-ui tabs

JS code:

 $(function() {
     var slider2_initialized = false;
     var slider3_initialized = false;

     $( "#tabs" ).tabs({
         activate: function( event, ui ) {
            //console.log("ui = ");console.log(ui);
            var tab_id = $(ui.newPanel).attr('id');//alert(tab_id);

            if(tab_id == "tabs-2" && slider2_initialized == false)
            {    
                $('.bxslider2').bxSlider({
                  auto:true,
                  mode: 'fade',
                  captions: true
                }); 
                //update initialization flag to true
                slider2_initialized = true;
            }
            else if(tab_id == "tabs-3" && slider3_initialized == false)
            {    
                $('.bxslider3').bxSlider({
                  auto:true,
                  mode: 'fade',
                  captions: true
                }); 
                //update initialization flag to true
                slider3_initialized = true;
            }
         }
     });

$('.bxslider1').bxSlider({
  auto:true,
  mode: 'fade',
  captions: true
});     
});

HTML:

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>
    <ul class="bxslider1">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
</p>
</div>

<div id="tabs-2">
<p>
    <div style="margin:0;padding:0;">
    <ul class="bxslider2">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
    </div>
</p>
</div>

<div id="tabs-3">
<p>
    <ul class="bxslider3">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
</p>
</div>
</div>