Question

我有两个Flexsliders，在Spry Tabbed Panel的两个面板内都有缩略图滑块。在页面加载时，滑块/缩略图对在Safari中看起来很疯狂。图像很大，在主滑块中裁剪;在缩略图中，图像也是巨大的，裁剪的，并且彼此叠加。但是，如果我调整浏览器窗口的大小，它们会立即弹出正确的形状和大小。在Chrome，Firefox，Opera和IE中，滑块/缩略图对看起来像两条白线，当我调整浏览器窗口大小时，它也会神奇地弹出正确的形式。我该如何解决这个问题？

以下是指向网页的链接：http://jmoon.net/Projects/PhoenixRising/PhoenixRising_P1.html

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

谢谢！

Answer 1

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

Answer 2

这是我用于此问题的代码，轻松添加所有的点击功能。

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

Answer 3

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

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

Flexslider依赖于jQuery，但如果您感兴趣，there是非jQuery版本window.dispatchEvent(new Event('resize'));。

除非我调整浏览器窗口大小，否则Flexslider将无法正确显示

3 个答案: