Twitter Bootstrap Carousel Slideが動作しない

Question

Twitter Bootstrap Carouselプラグインを実装しようとしていますが、正しく表示され、自動再生されますが、項目間のスライド効果は機能しません。 1つのアイテムを次のものに置き換えるだけです。これは機能的なものですが、これは満足できるUXではありません。思考？

<div class="span7"> 
     <div id="myCarousel" class="carousel slide"> 
      <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img/CoachellaValley.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 1</h4> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/CoachellaValley2.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 2</h4> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/CoachellaValley3.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 3</h4> 
       </div> 
      </div> 
      </div> 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
     </div> 
     </div> 
[...] 
<script src="js/bootstrap.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 
<script src="js/bootstrap-carousel.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
    $('#myCarousel').carousel(); 
    }) 
    </script> 

Answer 1

これを試してみてください：

は、あなたの文書にロードされているすべての次のjsスクリプト削除：

<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 
<script src="js/bootstrap-carousel.js"></script> 

をそして、ちょうどその同じ順序で次保つ

（jQueryのは、最初に行きます）

<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/bootstrap.js"></script> 

私が信じている問題は、同じスクリプトファイルを複数回読み込むのとは別に（ブートストラップのjsファイルにはすべてのプラグインが既に含まれているので、minバージョン（今は本番用に保存する必要はありません）または単一の別個のスクリプトファイルを含める必要はありません）、bootstrap.jsに含まれるトランジションスクリプトはロードされませんなぜなら、あなたのスクリプトがにロードされる順序のファイル。私はカルーセルコンテナと

$('.carousel').carousel('slide',{interval:1000}); 

ためclass="carousel"を使用していた場合

Answer 2

ディールがあり、それは、右クリック\ 1つの左のためにのみ動作し、かなりの罰金に動作します（ただし、 1回のみ）。

その後、使用class="carousel slide" と

$('.carousel .slide').carousel('slide',{interval:1000}); 

カルーセル切り替えが、スライドのアニメーション効果なしの場合。

Answer 3

しばらくこれで苦労した後、私はsolutionを発見した - あなただけの

ブートストラップ・transition.js

と動作するスライドアニメーションを含める必要があります。

Answer 4

あなたのコードが正しい..「スライド」クラスなしのブートストラップ3..Butでクラス「スライド」のための定義はありません

私のシステム細かい作業このコードで ..カルーセル画像が伴って変化します任意のアニメーション効果から...

は..あなたのコード内のブートストラップCSS & JSリファレンスをチェックし しても、リファレンスFの順序を確認しますコードで

<script> 
    $(document).ready(function() { 
     $('.carousel').carousel(); 
    }); 
</script> 

をこのスクリプトを追加します。

あなたはこの順序に従うことができジル： -

1. bootstrap.css
2. ブートストラップ-theme.css
3. jqueryの-1.9.1。JS
4. bootstrap.js

スクリプトブロックが出JQ Library..Soでは動作しませんが... JQライブラリファイルを正しく

を追加し、JQファイルは、スクリプトが動作する前にロードされていることを確認します。..そのために、ページの上部に参照を追加することができます

Answer 5

この質問はうまくいきましたが、私はここに来て同様の問題の答えを探しました。

カルーセルの最初のアイテムは、通常のように左にスライドしていましたが、2番目のアイテムはその背後にありませんでした。最初のアイテムが画面外になったら、2番目のアイテムが表示され、スライドインされません。その後、それが消えて最初のアイテムが正しく挿入されます。

この問題が発生している場合は、相対的な位置がないことを確認してください。 .item divに。

私はそうのようなことを追加しました：

.carousel-inner > .item { 
    position:relative; 
    height:495px; 
} 

は物事を台無しことが判明しました。位置の削除：相対;問題を修正しました。今滑りが滑らかで正しいです。