3

ブートストラップカルーセルに問題があります。カスタムコントロールを追加し、デザインに従ってスタイルを設定しましたが、次のスライドをクリックすると、前の画像が消えて中央に空白が残ります。

bootstrap.cssを編集し、.carousel-captionを変更し、ボタンにカスタムcssをいくつか追加しました。

テストページは次のとおりです：http：//valters.me/b/

そして、私はなんとかスクリーンショットを撮ることができました：http: //d.pr/i/yGzY

4

7 に答える 7

4

.leftと.rightからプロパティを削除しようとしましたが、解決しませんでした。私が思いついた解決策は、移行をスピードアップすることでした。Bootstrapのデフォルトは.6sイーズインアウトで、.5が私にとってはうまくいくように見えました。これをCSSに追加してみてください。

.carousel-inner>.item{
   /*disables white flash*/
   -webkit-transition: -webkit-transform .5s ease-in-out;
   -o-transition: -o-transform .5s ease-in-out;
   transition: transform .5s ease-in-out;
}

白は黒よりも目立ちやすいため、これをバックアップとして追加しました。

.carousel-inner{
/*just incase the flash (style above) comes back*/
   background: #000;
}

お役に立てれば！

于 2015-08-05T18:45:46.913 に答える
2

.carousel-control.leftと.carousel-control.rightからトランジションcssを削除すると、問題が解決するようです。

FFとChromeでテスト済み。

于 2013-03-27T12:51:49.713 に答える
2

ブートストラップ4の場合、これは私にとってはうまくいきました。あなたの.cssで：

.carousel { overflow: hidden; }
.carousel-item { overflow: hidden; }
于 2019-06-27T15:05:16.920 に答える
1

私の場合、誰かが以前に位置を設定していました：カルーセル内のimgタグに絶対。それを削除することは役に立ちました。

于 2015-06-17T12:55:11.570 に答える
1

私はこれを試しましたが、うまくいきました：

.carousel-inner > .item {
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
}

ブートストラップバージョン：3.3.7

于 2018-02-03T18:14:36.430 に答える
0

私は他の解決策を試しましたが、これだけがFFで機能しました。

.carousel-item {backface-visibility: visible;}
于 2018-04-22T19:42:48.277 に答える
0

bootstrap5.0.2とreact-bootstrap1.6.1でこの問題が発生しました。

適用されている.cssスタイルを変更することで解決策を思いつくことができました。

これをカスタム.cssファイルに追加して、デフォルトのbootstrap.cssをオーバーライドします

carousel-item-next{
  transition: transform 0s ease-in-out;
}

.carousel-item-prev{
    transition: transform 0s ease-in-out;
}
.carousel-item-left {
    transform: translateX(-100%);
}
.carousel-item-right {
    transform: translateX(100%);
}
于 2021-06-28T12:05:41.427 に答える