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

    });

Flexslider无法在标签中使用

2 个答案: