Flexslider不能在標籤中工作

Question

我使用wordpress的Magic Post Slider插件在woocommerce產品頁面中顯示flexslider。我使用標籤插件來顯示它內部的信息和滑塊，但flexslider不能在標籤中工作，直到我更改瀏覽器選項卡或調整瀏覽器窗口大小，然後flexslider工作並顯示所有圖像。

我已經應用修復，但仍然無法正常工作。我在這裏將我的js代碼

$(document).ready(function($) { 

    $('a[href="#tab-product_editor_313_tab"]').click(function() { 

     setTimeout(function() { 
      $(window).trigger('resize'); 
     }, 0); 

     setTimeout(function() { 
      $(window).trigger('resize'); 
     }, 2) 
    }); 

    var interval = 4000; 
    var autoslide = true; 

    interval = $(this).data("interval"); 

    if(interval == 0){ 
     autoslide = false; 
    } else { 
     autoslide = true; 
    } 

    $('.flexslider').flexslider({ 
     selector: ".slides > li", 
     animation: "slide", 
     prevText: "", 
     nextText: "", 
     pauseOnHover: true, 
     animationLoop: true, 
     animationSpeed: 300, 
     slideshowSpeed: interval, 
     directionNav : true, 
     slideshow: autoslide, 
     controlNav: false, 
     start: function(){ 
      $(window).resize(); 
     }, 
    }); 

    $(window).resize(); 

}); 

Answer 1

我覺得你的圖片路徑不正確。請檢查元素並檢查圖像路徑。

Answer 2

這裏是正確的代碼

$(window).load(function() { 

$('a[href="#tab-product_editor_313_tab"]').click(function() { 

    setTimeout(function() { 
     $(window).trigger('resize'); 
    }, 0); 

    setTimeout(function() { 
     $(window).trigger('resize'); 
    }, 2) 
}); 

var interval = 4000; 
var autoslide = true; 

interval = $(this).data("interval"); 

if(interval == 0){ 
    autoslide = false; 
} else { 
    autoslide = true; 
} 

$('.flexslider').flexslider({ 
    selector: ".slides > li", 
    animation: "slide", 
    prevText: "", 
    nextText: "", 
    pauseOnHover: true, 
    animationLoop: true, 
    animationSpeed: 300, 
    slideshowSpeed: interval, 
    directionNav : true, 
    slideshow: autoslide, 
    controlNav: false, 
    start: function(){ 
     $(window).resize(); 
    }, 
}); 

    $(window).resize(); 

    });