3

slick.js カルーセルを含む Web サイトがあります。画面サイズが約 770px 未満のデバイスで Web サイトを表示すると、ページの端に白い隙間ができることに気付きました。

白い隙間は右側にあります。

いくつかのテストの後、ウェブサイトから slick.js を削除すると、白い隙間が消えることに気付きました。
最初は、スライドの内容が原因だと思っていましたが、各スライドを数語に減らしたところ、まだ空白が残っています。

HTMLは次のとおりです。

<div class="m-carousel" dir="rtl">
    <div class="slide">Test Slide</div>
    <div class="slide">Test Slide</div>
    <div class="slide">Test Slide</div>
    <div class="slide">Test Slide</div>
</div>

そしてJavascript（ページロード後）：

$('.m-carousel').slick({
    dots: true,
    rtl: true
});

CSS（スライダーに関して）：

// slick slider styling
.slick-dots li button:before {
    font-size: 9px;
}

.slick-dots li.slick-active button:before {
    color: accent;
}

モバイルでは、ページは左右に移動し (想定されていない場合)、そのギャップを明らかにしたり隠したりします。それは本当に迷惑です。

本文に設定overflow-x: hiddenしてみましたが、サイトのナビゲーションや全体的なスクロールに多くの問題が発生します。

4

2 に答える 2

3

それを理解するのに多くの時間がかかりましたが、ようやく理解できました。
問題は矢でした。bootstrap と slick.js を組み合わせると、画面幅 767px 以下で矢印が表示されず、原因不明の白い隙間ができてしまうようです。

この問題を解決するには、JavaScript で矢印を無効にするだけで済みました。

$('.m-carousel').slick({
  arrows: false
});

ホワイト ギャップを示すデモをここで見ることができます。

NominalAeon の継続的なヘルプとサポートに感謝します。

于 2015-05-28T09:35:51.853 に答える
0

あなたの問題はオーバーフローだと思います。矢印を保持して、オーバーフローを非表示に変更できた可能性があります。

于 2016-07-24T03:28:32.297 に答える