[解決済み] ブートストラップカルーセルのアイテムがスライドする速度をコントロールするには？

質問

間隔を設定できるようですが、アイテムのスライド速度を制御したいのですが？

   // Sets interval...what is transition slide speed?
    $('#mainCarousel').carousel({
    interval: 3000
});

どのように解決するのですか？

APIで速度を制御することはできません。しかし、それを司るCSSを変更することは可能です。 そのためには carousel.less ファイルに

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

と変更し .6s を好きなように変更してください。

.lessを使用しない場合、.lessの中にある bootstrap.css ファイルに記述してください。

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

と変更し 0.6s を好きな時間に変更してください。また、以下の関数呼び出しで時間を編集したい場合もあります。

.emulateTransitionEnd(2000) 

で bootstrap.js 関数内で Carousel.prototype.slide . これは、トランジションを同期させ、トランジションが終了する前にスライドが消えるのを防ぐためです。

編集 2014/7/8

YellowSharkさんご指摘の通り、JSでの編集は不要になりました。cssの変更のみ適用します。

2015/8/20編集 さて、cssファイルを編集した後は、CAROUSEL.TRANSITION_DURAMATION (in bootstrap.js) または c.TRANSITION_DURATION (if you use bootstrap.min.js) を編集してその中の値を変更するだけです（デフォルトは600）。最終的な値は、あなたがcssファイルに入れたものと同じでなければなりません（例えば、cssの10s = .jsの10000）。

2018/01/16編集 Bootstrap 4の場合、遷移時間を例えば2秒に変更するには、以下のように追加します。

$(document).ready(function() {
  jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000  // 2 seconds
});

をサイトのJSファイルに追加し

.carousel-inner .carousel-item {
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
}

をサイトのCSSファイルに追加します。