jQuery タブとスライダーの併用

質問

jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが
どうしても1つめのタブでしかスライダーが正しく動作しません。
overflow:hidden; が原因なのでしょうか。
どのように書き換えれば動作するようになるでしょうか。

スライダーはflexsliderを
http://flexslider.woothemes.com/thumbnail-controlnav.html
タブはこちらページを参考にしました
http://alphasis.info/2011/07/jquery-ui-tabs-bottom/

css
#jquery-ui-tabs {
font-size: 12px;
color: #666666;
}
.jquery-ui-tabs-bottom {
position: relative;
}
.jquery-ui-tabs-bottom .ui-tabs-panel {
height: 410px;width: 80%;
overflow: auto;
}
.jquery-ui-tabs-bottom .ui-tabs-nav {
position: absolute !important;
left: 1px;
bottom: 1px;
right: 1px;
padding: 0 0px 0px 0px;
}
.jquery-ui-tabs-bottom .ui-tabs-nav li {
margin-top: -1px;
border: 1px solid #d3d3d3 !important;
border-top: !important;
border-radius: 10px !important;
color: #666666;
}
.jquery-ui-tabs-bottom .ui-tabs-nav li:hover {
margin-top: 0px;
border: 1px solid #aaaaaa !important;
border-top: !important;
border-radius: 10px !important;

}
.jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected {
margin-top: 0px;
border: 1px solid #000 !important;
border-top: !important;
border-radius: 10px !important;
background-color: #cd5c5c !important;
}

script
<script type="text/javascript">
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});

jQuery( function() {
jQuery( '#jquery-ui-tabs' ) . tabs();
jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' )
. removeClass( 'ui-corner-all ui-corner-top' )
. addClass( 'ui-corner-bottom' );

} );
</script>

HTML
<div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom">
<ul>
<li><a href="#jquery-ui-tabs-1">その1</a></li>
<li><a href="#jquery-ui-tabs-2">その2</a></li>
<li><a href="#jquery-ui-tabs-3">その3</a></li>
</ul>
<div id="jquery-ui-tabs-1">
<div class="flexslider">
<ul class="slides">
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
</ul>
</div>
</div>
<div id="jquery-ui-tabs-2">
<div class="flexslider">
<ul class="slides">
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
</ul>
</div>
</div>
<div id="jquery-ui-tabs-3">
<div class="flexslider">
<ul class="slides">
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
<li data-thumb="images/XXX.png">
<img src="images/XXX.png">
</li>
</ul>
</div>
</div>

回答No.1

doraneko66

そりゃ、そうだ

$(window).load(function() {

をよく調べてみると良いと思います。