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 回答