1

私は次のコードを持っています：

<html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
          $(document).ready(function(){
            $('.carousel').carousel();
          });
        </script>
    </head>

    <body>
        <div id="welcome-carousel" class="carousel slide"><!-- class of slide for animation -->
          <div class="carousel-inner">
            <div class="item active"><!-- class of active since it's the first item -->
              <img src="img/image1.png" alt="" />
            </div>
            <div class="item">
              <img src="img/image4.png" alt="" />
            </div>
            <div class="item">
              <img src="img/image3.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
            <div class="item">
              <img src="img/image2.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
            <div class="item">
              <img src="img/image1.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
          </div><!-- /.carousel-inner -->
          <!--  Next and Previous controls below
                href values must reference the id for this carousel -->
            <a class="carousel-control left" href="#welcome-carousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#welcome-carousel" data-slide="next">&rsaquo;</a>
        </div>
    </body>
</html>

これはindex.htmlファイルにあります。同じディレクトリ内に、boostrap.min.jsが含まれるjsというディレクトリと、boostrap.min.cssが含まれるcssというcssディレクトリがあります。最後に、ダウンロード時にTBが提供したハフリング画像とギャラリーの画像を含むフォルダ呼び出しimg。

基本的に、次のようになります。http://i.imgur.com/YnRtq.png

矢印をクリックしても画像は変わりません。また、矢印を画像の右側に配置するのではなく、画像内に配置する必要があります。

4

3 に答える 3

2

bootstrap-carousel.jsカルーセル機能を使用するために必要な、プルインしていないように見えます。

上記のコードから、カスタマイズされたバージョンのBootstrap（ここで入手可能： http ：//twitter.github.com/bootstrap/customize.html）を構築しているかどうかはわかりませんが、そうでない場合はダウンロードする必要があります/ include（またはリモートで呼び出す）：

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

縮小された基本バージョンに加えて。

あなたが検討したいと思うかもしれない1つの新しい追加/オプションは次のとおりです：http ：//www.bootstrapcdn.com/これは素晴らしいアイデアであり、役に立つかもしれません。

http:通話も除外しました//ajax.googleapis.com

お役に立てれば。

于 2012-11-05T00:04:13.173 に答える
0

HTMLでブートストラップカルーセルのすべての要素を使用し、次のようにJqueryを書き留めます

<script type="text/javascript">
!function ($) {
     var $window = $(window)

    $(document).ready(function() {
        $('.carousel').carousel();
    });
} (window.jQuery)
</script>
于 2013-02-08T19:09:09.193 に答える
0

iOS Safariのカルーセルに問題があり、含まれている.cssファイルが一部のブラウザーのブラウザープレフィックスを含めることを誤って無視していることを表すスレッドを見つけました。エラーが少し異なりました（スライドイメージのロードに失敗しました）以前のbootstrap.cssファイルを現在のバージョン（3.3.2に更新された3.2.1を使用していた）に置き換えました。これで問題が解決しました。お奨めは簡単な修正が大好きです。

于 2015-02-12T12:50:07.033 に答える