easyTabs中的Flexslider

时间:2014-10-12 10:43:51

标签: jquery tabs flexslider

我在jQueryEasyTabs标签中有一个Flexslider图库,但当我点击“图库”标签时,我的图库图片将无法显示。 我认为有一个'easytabs:after'回调但它不起作用。我该如何解决这个问题?

                <ul class="sub-menu">
                    <li><a href="#sub-special">Special Events</a></li>
                    <li><a href="#sub-gallery">Gallery</a></li>
                </ul>

                <div class="tab-content" id="sub-gallery">
                    <div class="flexslider">
                      <ul class="slides">
                        <li data-thumb="./images/gallery/1.jpg">
                          <img src="./images/gallery/1.jpg" />
                        </li>
                        <li data-thumb="./images/gallery/2.jpg">
                          <img src="./images/gallery/2.jpg" />
                        </li>
                        <li data-thumb="./images/gallery/3.jpg">
                          <img src="./images/gallery/3.jpg" />
                        </li>
                        <li data-thumb="./images/gallery/4.jpg">
                          <img src="./images/gallery/4.jpg" />
                        </li>
                        <li data-thumb="./images/gallery/5.jpg">
                          <img src="./images/gallery/5.jpg" />
                        </li>
                        <li data-thumb="./images/gallery/6.jpg">
                          <img src="./images/gallery/6.jpg" />
                        </li>
                      </ul>
                    </div>
                </div>


/* Flexslider Gallery */
$('#sub-gallery .flexslider').flexslider({
    animation: 'slide',
    smoothHeight: true,
    slideshow: false
}); 

enter image description here

1 个答案:

答案 0 :(得分:0)

这对我有所帮助:

$('#tab-container').easytabs({
    defaultTab: "#defaultTab"
}).bind('easytabs:after', function(){
    console.log('after fired up!')
    $('#sub-gallery .flexslider').flexslider({
        animation: 'slide',
        smoothHeight: true,
        slideshow: false
    }); 
});