0

ブートストラップカルーセルを開始できません、ええと、カルーセルです。以下は、私がやろうとしていることに関係するすべてのコードです。ブラウザでレンダリングすると、2つの画像が上下に表示され、その下にある画像よりも小さい画像と大きい画像だけが表示されます。カルーセルでレンダリングするのではなく、HTMLで定義されたとおりにDIVをレンダリングするだけです。jQuery.ready関数が呼び出されていること、およびカルーセルを初期化するためのコードが呼び出されていることを確認しました。IE9、Chrome、Firefoxなどの複数のブラウザーでもこれを試しました。アイデアが足りなくなっています。どんな助けでもいただければ幸いです。ありがとう！

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link type="text/css" href="styles/carousel.css" />

    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap-transition.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap-carousel.js"></script>

</head>
<body>
    <script type="text/javascript">

        $(function () {
            $('#carousel').carousel();
        });

    </script>

    <div id="carousel" class="carousel">

      <div class="carousel-inner">

        <div class="item active">
           <img src="images/APM_icon_big.png" alt="Some Alt Text" />
           <div class="carousel-caption">
             Some caption
           </div>
         </div>

        <div class="item">
           <img src="images/appdev_icon_big.png" alt="Some Alt Text" />
           <div class="carousel-caption">
             Some caption
           </div>
         </div>

        …

      </div>

      <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
       <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>

    </div>
</body>
</html>
4

2 に答える 2

1

このフィドルでは問題なく動作しているようです

carousel の bootstrap で定義されたスタイルを必ず含めてください。フィドルに含まれる css は、twitter-bootstrap カスタム ダウンロード ページから取得され、 JS コンポーネント> Carouselのみを選択します。

<script>ページの内側<head>または最後に配置しても害はないかもしれません。

于 2012-07-18T18:15:48.840 に答える
0

私はそれを考え出した。タグrel="stylesheet"にa がありませんでした。LINK

于 2012-07-23T01:50:02.530 に答える