5

ここで Twitter Bootstrap の Carousel jQuery プラグインを実装しました: http://zarin.me/circlefive/dashboard.html (応答タブを参照)

カルーセルは通常機能しますが、時々動かなくなります。特に、他のタブを操作してから [応答] タブを使用すると発生します。タブと関係があると思います..

カルーセルが動かなくなった理由を知っている人はいますか?

ありがとう！

4

2 に答える 2

3

この問題は、@Francesco Frassinelli がコメントで指摘した内容に沿っています。つまり、カルーセルが CSS3 トランジション (基本的に IE 以外のブラウザー) を使用している場合、トランジションの終了時にカルーセルが非表示の場合、$.support.transition.endイベントは決して発生しません。これにより、カルーセルがスライド状態で中断され、すべての機能がショートします。

Issue #1887で、 @fatは、最初から動かなくなるのを防ぐための提案を投げかけました。

「表示を切り替える前後に、スライド ショーを一時停止して再開する必要があります。」

Issue #3351のモーダルでカルーセルを使用する場合の回避策も提案しました。これはユースケースに簡単に適応できます。

$('a[href="#responses-1"]').on('shown', function () {
    var $carousel = $('.carousel');

    if ($carousel.data('carousel') && $carousel.data('carousel').sliding) {
      $carousel.find('.active').trigger($.support.transition.end);
    }
});

これは基本的に、カルーセルが一時停止された場合に表示されると、カルーセルのロックを解除するだけです。

この不適切な動作はさまざまなシナリオで発生するため、課題 #3351で、 bootstrap-carousel.jsプラグイン コードに直接統合できる潜在的な永続的なソリューションの実現可能性について提案しました。誰かがそれが良いアイデアだと思う場合、またはそれを達成する方法について他のアイデアを持っている場合、その問題はまだ未解決であるため、フィードバックを歓迎します.

于 2012-09-13T00:44:51.887 に答える
0

クロームでカルーセルの動作を検査する場合、タブを変更したときにまだ実行されている場合はカルーセルを確認できます。

また、カルーセルがアクティブタブにないため、カルーセルのdisplay: none;親divにaが適用されます。これが問題の原因である可能性があります。（スクリーンショットのようになります）

タブに関連するコンテンツを表示する前に、.carousel('pause')最初の3つのタブと最後のタブをクリックしたときにトリガーすることで修正できると思います。.carousel('cycle')

カルーセルが動かなくなった

于 2012-07-20T22:08:46.403 に答える