0

私の問題をよりよく説明するためのテストページがあります。リストにいくつかの項目があります (それらはテスト ページの画像です)。それらの 1 つをクリックすると、対応するスライドショーが flexslider を使用して下にスライドします。

問題は、ページの読み込み時に、スライドショーにすべてのスライドが一度に表示され、意図したよりもはるかに小さいサイズになることです。しかし、ウィンドウからフォーカスを切り替えると (つまり、ブラウザーのタブを切り替えるか、別のプログラムに移動して戻ってくる)、スライドショーが機能し、スライドは適切なサイズになります。これは、モバイル デバイスでも発生します。

firebug で確認すると、ul.slides に適用される element.style ルールがあります。

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

スライドの 1 つを非表示にします。さらに、ul.slides 内のリスト項目には、最初の幅を与える別のルールがあります。これは、すべてのスライダーで同じではないため、どこから来ているのかわかりません。

誰かが見て、修正を提案できますか? element.style ルールをオーバーライドしようとしましたが、これまでのところ失敗しています。

4

1 に答える 1

1

私はそれを理解したと思います、少なくとも原則として...

.flexslider{display:none;}Flexslider のリサイズ機能を捨てているようです。あなたはそれを取り除くことができますが、それは醜いロードになります.

上記の醜い読み込みを避けるために、私は簡単な回避策をまとめました - 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-08T03:45:23.320 に答える