1

我有两个 Flexslider，在 Spry 选项卡式面板的两个面板内都有缩略图滑块。页面加载后，滑块/缩略图对在 Safari 中看起来很疯狂。图像很大，在主滑块中被裁剪；在缩略图中，图像也很大，被裁剪，并且相互叠加。但是，如果我调整浏览器窗口的大小，它们会立即弹出正确的形状和大小。在 Chrome、Firefox、Opera 和 IE 中，滑块/缩略图对看起来像两条白线，当我调整浏览器窗口大小时，它们也会神奇地弹出正确的形式。我怎样才能解决这个问题？

这是网页的链接：http: //jmoon.net/Projects/PhoenixRising/PhoenixRising_P1.html

滑块/缩略图对位于前两个面板中，“Commonwealth & Council”和“Transmission Gallery”

谢谢！

4

3 回答 3

2

我遇到了这个问题，这是因为您的画廊在页面加载时隐藏，因此插件无法读取容器的宽度和高度以使其正确呈现。而不是在页面加载时初始化插件，而是在用户单击选项卡时对其进行初始化。如果选项卡窗口上有任何动画，请确保在动画完成后初始化 flexslider。

于 2013-06-17T15:30:53.637 回答
0

这是我用来解决这个问题的代码，很容易添加点击功能。 

$( document ).ready(function() {
   $('.***-your class or id-***').click(function(){
        $(window).load(function() {

          // The slider being synced must be initialized first
          $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 95,
            itemMargin: 5,
            asNavFor: '#slider'
          });

          $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel"
          });
        });
      });
    });
于 2016-06-16T11:56:12.930 回答
0

这里的另一个解决方案是只使用$(window).trigger('resize');

确保在需要时调用它（即在 flexslider 初始化之后）。

Flexslider 无论如何都依赖于 jQuery，但如果你有兴趣，有一个非 jQuery 版本window.dispatchEvent(new Event('resize'));。

于 2017-08-01T18:54:22.670 回答