2

Flexslider が最後のスライドの後に余分な空白を追加するという問題が発生しています。

一度に 2 つの 342 ピクセル幅のスライドを表示するための 702 ピクセル幅の div を作成しました。それぞれの間に 18 ピクセルがあります。「itemWidth」を「360px」に設定して余分なスペースを確保し、「itemMargin」を「0」に設定しました。

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: true,
        itemWidth: 360,
        itemMargin: 0
      });
    });
</script>

これにより、スライド間に必要な適切なスペースが得られますが、最後に 18 ピクセルが追加され、これを一生取り除くことはできません。さらに厄介なことに、3 つしか必要ないはずの 4 つ目のスライド トランジションのように扱われます。

ここにスクリーン グラブがあります: http://bit.ly/XHJVeU

下部の 4 つのドットに注意してください。4 つのスライドを表示するには 3 つしか必要ありません。

考えられるすべての CSS を微調整しましたが、まだうまくいきません。画像にパディング/マージンを追加しても何もしません。イライラします。

どちらにしても。誰かが以前にこれに遭遇したことがあり、それが迅速な修正であることを願っています.

前もって感謝します。

更新: 参照用に HTML が含まれています。

<div id="carousel" class="flexslider">
<ul class="slides">
    <li><img src="images/suite-a_01.png" /></li>
    <li><img src="images/suite-a_02.png" /></li>
    <li><img src="images/suite-a_03.png" /></li>
    <li><img src="images/suite-a_04.png" /></li>
</ul>
</div>

ありがとう。

4

2 に答える 2

2

flexslider のライブ出力を調べて、ページネーション バーをチェックしてください (これはクラス "flex-control-nav" と "flex-control-paging" を備えたものです)。これと同じ問題が発生したばかりで、CSS 幅があることがわかりました。私のコンテンツを超えて拡張されたため、右側に空白が追加されました。

それが明確であることを願っています。明確にできるかどうか教えてください。

于 2013-04-20T12:33:19.697 に答える
0

この問題に遭遇した人にとって、数年後...

Flexslider内の子要素に、予想される幅を超えるパディングやマージンがないことを確認してください。

それが、代償として追加の架空のスライドを引き起こすものです。

.slide {
    margin: 0 !important;
    padding: 0 !important;
}
于 2017-12-11T03:41:16.537 に答える