bxslider not activating in tabs ui

Question

I SEARCHED this problem in SO database, but there is no SUCH problem.

I have 3 configured tabs (tabs UI) and slider in each of the tab (bxslider).

HTML:

<div id="tabs">
  <ul>
    <li><a href="#refrig">Грузовик-рефрижератор</a></li>
    <li><a href="#tent">Тентованный грузовик</a></li>
    <li><a href="#tral">Грузовик-трал</a></li>
  </ul>

  <div id="refrig">
    <p>
      Content 1
    </p>
    <div class="moduletable_park-slider">
      <h2>Галерея грузовиков</h2>
      <div class="slider_refr">
        <ul>
          <li><img src="/images/trucks/refrig/Fotolia_52239820_Subscription_XXL.jpg"></li>
          <li><img src="/images/trucks/refrig/Fotolia_55218754_Subscription_XL.jpg"></li>
        </ul>
      </div>

      <div class="slider_refr-pager">
        <a data-slide-index="0" href="/"><img src="/images/trucks/refrig/Fotolia_52239820_Subscription_XXL.jpg"></a>
        <a data-slide-index="1" href="/"><img src="/images/trucks/refrig/Fotolia_55218754_Subscription_XL.jpg"></a>
      </div>
    </div>
  </div>

  <div id="tent">
    <p>
      Content 2
    </p>
    <div class="moduletable_park-slider">
      <h2>Галерея грузовиков</h2>
      <div class="slider_tent">
        <ul>
          <li><img src="/images/trucks/tent/Fotolia_51570512_Subscription_XL.jpg"></li>
          <li><img src="/images/trucks/tent/Fotolia_52155382_Subscription_XXL.jpg"></li>
        </ul>
      </div>
      <div class="slider_tent-pager">
        <a data-slide-index="0" href="/"><img src="/images/trucks/tent/Fotolia_51570512_Subscription_XL.jpg"></a>
        <a data-slide-index="1" href="/"><img src="/images/trucks/tent/Fotolia_52155382_Subscription_XXL.jpg"></a>
      </div>
    </div> 
  </div>

  <div id="tral">
    <p>
      Content 3
    </p>
    <div class="moduletable_park-slider">
      <h2>Галерея грузовиков</h2>
      <div class="slider_tral">
        <ul>
          <li><img src="/images/trucks/tral/Fotolia_15252289_Subscription_XXL.jpg"></li>
          <li><img src="/images/trucks/tral/Fotolia_39307969_Subscription_L.jpg"></li>
        </ul>
      </div>
      <div class="slider_tral-pager">
        <a data-slide-index="0" href="/"><img src="/images/trucks/tral/Fotolia_15252289_Subscription_XXL.jpg"></a>
        <a data-slide-index="1" href="/"><img src="/images/trucks/tral/Fotolia_39307969_Subscription_L.jpg"></a>
      </div>
    </div>
  </div>

</div>

and JS initialization:

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

  $( "#tabs" ).tabs({
    activate: function( event, ui ) {

      var tablength = ui.newPanel;

      var tab_id = $(ui.newPanel).attr('id');
      //alert(tab_id);

      if(tab_id == "tent" && slider2_initialized == false)
      {
        $('.slider_tent ul').bxSlider({
          controls: false,
          pagerCustom: '.slider_tent-pager'
        });
        slider2_initialized = true;
      }
      else if(tab_id == "tral" && slider3_initialized == false)
      {
        $('.slider_tral ul').bxSlider({
          controls: false,
          pagerCustom: '.slider_tral-pager'
        });
        slider3_initialized = true;
      }
    }
  });

  $('.slider_refr ul').bxSlider({
    controls: false,
    pagerCustom: '.slider_refr-pager'
  });

});

But when i go to second or third tab, there is no content and slider loading.