-2

Bootstrap のカルーセルに問題があります。スライドがカルーセル div よりも広い場合、最後のスライドが最初のスライドと重なってしまいます。

Jsfiddle による問題の説明 (前方にスクロールして、最後のスライドが最初のスライドとどのように重なっているかを確認してください)

jsfiddle

"Links to jsfiddle must be accompanied be a code"

また、最初にカルーセルが最後のスライドから最初のスライドに移動した後、カルーセル インジケーターが現在のスライド番号の強調表示を停止することに気付きました。

私は何を間違っていますか？

4

2 に答える 2

0

OK、この回答の助けを借りて問題を回避しました。

<img>要点は、それぞれの es を css バックグラウンドにプッシュし.carousel .item、次の csses を適用したことです。

.carousel .item {
    background-position: center center;
    background-repeat: no-repeat;
    /* background-size: cover; */ /* I don't wanna (up|down)scale */
    height: 510px; /* fixed height of the background images */
}

#carousel-item-1 {
    background-image: url(myImage.jpg);
}

#carousel-item-2 {
    background-image: url(myImage.jpg);
}

#carousel-item-3 {
    background-image: url(myImage.jpg);
}

楽しい副次的効果は、画像を水平方向と垂直方向に中央揃えにする (トリミングする) ことです。これも必要でした。

私はこの方法が正しい方法だと思いますし、最初からこの方法を使用するべきでした。でも固定の手書きはあんまり好きじゃないheight: 510px。後で頭が痛くなると思いますが、まぁ…

于 2013-05-06T08:22:06.367 に答える
0

Bootstrap 3 の場合、古い jQuery バージョン (1.7) を使用すると同じ問題が発生しました。Bootstrap 3 の jQuery は 1.9.1 以降である必要があります。

于 2015-03-19T15:26:50.577 に答える