flexslider裏面的手風琴行爲問題

我有一個test page來更好地解釋我的問題。我在列表中有幾個項目（它們是測試頁上的圖像）;當我點擊其中一個幻燈片時，使用flexslider的相應幻燈片放下。flexslider裏面的手風琴行爲問題

問題是，在頁面加載時，幻燈片顯示一次顯示所有幻燈片，尺寸比預期小得多。但是，如果我從窗口切換焦點（即在瀏覽器標籤之間切換或移動到另一個程序並返回），幻燈片顯示正在運行，幻燈片尺寸正確。這也發生在移動設備上。

當我與螢火蟲檢查，有適用於ul.slides的element.style規則：

transform: translate3d(-89px, 0px, 0px);

，它可以隱藏幻燈片之一。另外，對於ul.slides中的列表項，還有另外一個規則，它們的初始寬度對於所有滑塊來說都不一樣，所以我不明白它來自哪裏。

有人可以看看並提出修復建議嗎？我試過重寫element.style規則，但迄今爲止失敗。

來源

2013-05-07 brunn

您是否使用flexslider鎖定？ – apaul 2013-05-07 23:48:04

@ apaul34208不，這只是我以前使用過它而且效果很好。這是我遇到的第一個問題。 – brunn 2013-05-08 00:14:07

我想我至少想通了，在主...

.flexslider{display:none;}似乎甩開Flexslider的調整大小功能。您可以將其刪除，但這會造成一些難看的加載。

爲了避免說醜裝我把一個快，工作around- jsFiddle

$(document).ready(function(){ 
    $(".flexslider").css('display','block').slideUp(); 
});

有一個仍然是一個快速的毛刺，同時加載，但希望它至少會引導你在正確的方向。

我有點玩的另一種方法是嘗試並強制調整大小功能類似所謂

$(".client").click(function() { 
    $('.flexslider').resize(); // Problematic but promising 
    var project = this.id; 
    var project_id = '#' + project + '-project'; 
    var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first"); 
    elem.slideUp('slow', function() { 
     $(project_id).slideDown('slow'); 
    }); 
});

這類解決了小型圖片問題，但參差不齊最好。

來源

2013-05-08 03:45:23 apaul

我也想出了'display：none'規則導致了這個問題。你的回答讓我走上正軌，所以謝謝你謝謝你，謝謝！ – brunn 2013-05-08 16:56:19

@brunn很高興幫助，祝你好運 – apaul 2013-05-08 17:37:35

flexslider裏面的手風琴行爲問題

回答

相關問題