twitter-bootstrap - Twitter Bootstrap のカルーセルが 1 回だけスライドする

Question

次のコードは期待どおりに機能します。つまり、3秒ごとに自動的に変化し、前/次のボタンで制御できます。問題は、カルーセルに .slide クラスを追加すると、異常な方法で壊れることです。

.slide クラスを追加すると、スライドは 1 回だけ機能します。前へ/次へボタンをクリックすると、期待どおりにスライドしますが、カルーセルがフリーズします。自動次を許可しても同じ効果があります (次へスライドしてからフリーズします)。

何か案は？

#myCarousel.carousel
  .carousel-inner
    .item.active
      = image_tag 'Carousel1.png'
      .carousel-caption
        %h4 First Thumbnail label
        %p Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
    .item
      = image_tag 'Carousel2.png'
      .carousel-caption
        %h4 Second Thumbnail label
        %p Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
    .item
      = image_tag 'Carousel3.png'
      .carousel-caption
        %h4 Third Thumbnail label
        %p Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  %a.left.carousel-control{"data-slide" => "prev", :href => "#myCarousel"} ‹
  %a.right.carousel-control{"data-slide" => "next", :href => "#myCarousel"} ›


:javascript
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 3000
    })
  });