Flexslider不能在标签中工作

我使用wordpress的Magic Post Slider插件在woocommerce产品页面中显示flexslider。我使用标签插件来显示它内部的信息和滑块，但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(); 

});

来源

2016-07-27 Shinedesigners

帖子截图或给演示网址来了解这个问题显然 – Jayanta

好吧确保@Jayanta – Shinedesigners

我加入了截图供参考@Jayanta – Shinedesigners

我觉得你的图片路径不正确。请检查元素并检查图像路径。

来源

2016-07-27 09:30:26

不，我已经检查过，并且当我更改浏览器选项卡时，它的工作也很完美。 – Shinedesigners

OK，然后请最小高度指定滑块容器 –

OK了，你必须使用 “$（窗口）.load（函数（）{” 不 “$（文件）。就绪（函数（$问题）{“ –

这里是正确的代码

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

    });

来源

2016-07-27 09:45:27

这里是完整的代码bro。请尝试这个只有第一行被更改 –

我已经更改了您给出的代码，但仍然结果是一样的 – Shinedesigners

你可以给我发送链接 –

Flexslider不能在标签中工作

回答

相关问题