0

私のサイトでは、一度に 1 つずつスライドする 4 つの表示項目を含む jQuery レスポンシブ カルーセルを使用する必要があります。要点: このカルーセルは div に配置されdisplay:none、slideToggle スクリプト (jQuery ）。さて、div が表示されると、カルーセルは表示されません。何もない！display:noneカルーセルを削除すると、完全に表示されることに注意してください。私はたくさんのカルーセル プラグイン (bxslider、caroufredsel、elatislide、flexslider) を試しましたが、この問題はすべてのプラグインで発生します。そしたら… 気が狂う!!

すみません、コードは次のとおりです。

HTML (これはFlexSliderの場合ですが、コードは他のプラグインでも同様です)

<div id="hiddenDiv">
  <div id="hiddenDivInner">
    <div class="flexslider">
      <ul class="slides">
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
</div>

CSS

#hiddenDiv{
    display:none;
    padding-bottom:10px;
    background: url("../img/xxx.gif") repeat left bottom #FFFFFF;
}

SCRIPT (サイトからコピペ。このスクリプトは$(document).ready他のスクリプトと一緒に挟まれています。すでにload機能を削除しようとしました)

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 300,
    itemMargin: 5,
    minItems: 1,
    maxItems: 4
  });
});


$("#trigger").click(function () {
    $("#hiddenDiv").slideToggle(400, "easeInOutExpo");
});

このコードでは、slideToggle ボタン (#trigger) を使用して div を上下にスライドさせても、すべてのカルーセルが機能するわけではないことを思い出してください。 display:none

4

3 に答える 3

0

ビューポートの外に配置してdivを「非表示」にします

#hiddenDiv {
    position:absolute;
    top: -3000px;
}

div は非表示ではないため、スクリプトは初期化できますが、表示されません。

onload またはトリガー onclick で、display を none に設定し、position を relative に設定できます。

編集絶対配置では、ドキュメント フローから要素が削除されるため、display:none のように動作します。

于 2012-12-07T22:52:20.733 に答える
0

display: none;を使用してカルーセルを非表示にする代わりに、visibility: hidden;

次に、それを表示する準備ができたら、使用しますvisibility: visible;

カルーセルは、初期化時にコンテナにディメンションが必要です。を使用するdisplay: none;と、次元がゼロになり、カルーセルが正しく初期化されません。

また、display: none;要素をフローから外し、visibility: hidden;要素を所定の位置に保持しますが、非表示にします。これの利点は、要素を表示するときに、周囲のコンテンツ フローが中断されないことです。

参照: https://developer.mozilla.org/en-US/docs/CSS/visibility

あなたのコード/レイアウトをすべて見ることはできませんが、このようなことを試してみてください. レイアウトに合わせて変更...

#hiddenDiv{
    visibility: hidden;
}


$("#trigger").click(function () {
    $("#hiddenDiv").css('visibility', 'visible');
});

編集：

もう 1 つの可能性は、最初の CSS 内ではなく、作成後にのみ非表示にすることです。

$(document).ready(function() {

    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 300,
        itemMargin: 5,
        minItems: 1,
        maxItems: 4
    });

    $("#trigger").click(function () {
        $("#hiddenDiv").slideToggle(400, "easeInOutExpo");
    });

    $("#hiddenDiv").css('display', 'none'); // the very last thing

});

CSS:

#hiddenDiv{
    padding-bottom:10px;
    background: url("../img/xxx.gif") repeat left bottom #FFFFFF;
}
于 2012-12-07T19:39:46.097 に答える
0

これは私の修正です！正しいと思います！

.hidden{
  visibility: hidden;
  position: absolute;
  width: 300px;
  overflow: hidden;
}
于 2013-08-04T15:53:38.633 に答える