Bxslider inside different jquery ui tabs

by Rahul Gupta

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />     
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!--<script src="http://bxslider.com/js/rainbow.min.js"></script>     -->
     

     
<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>

JavaScript

$(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
});     
});