1

Bootstrap カルーセルを動作させることができません。すべての投稿を見て、すべての例をコピーしましたが、何も機能しません。以下は私のコードです。次へボタンをクリックしても何も起こらず、自動で進みません。何が欠けている？

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/site.css" type="text/css" media="screen,projection">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


</head>
<body>
    <div class="container">



        <div class="row">
            <div class="span12">
                <div id="myCarousel" class="carousel slide">
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>

                    </ol>
                    <div class="carousel-inner">

                        <div class="item active">
                            <img src="img/img1.png" alt="">
                        </div>



                        <div class="item">
                            <img src="img/img2.png" alt="">
                        </div>


                    </div>

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

        </div>


    </div>

</body>
</html>


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script>
    $(document).ready(function () {
        $('.carousel').carousel({
            interval: 2000
        })
    });
</script>
4

2 に答える 2

0

私は数週間前に同じ問題を経験しました.私の問題が何であったかを覚えています.あなたが私と同じケースにいることを願っています.

カスタマイズしたブートストラップ パッケージを作成するときに、「トランジション」と「カルーセル」の両方の JS プラグインを含める必要があります。「カルーセル」のみをチェックしたと思います。

この行を置き換えると:

<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

これらのものによって、それは動作するはずです。

<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>

コードをコピーしてローカル ファイルに貼り付け、オンライン リソースのリソースへのリンクを変更しました。以前のコメントが明確でない場合に備えて、ファイル全体を次に示します。

<!DOCTYPE html>
<html lang="en">
<head>
    <!--<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <!--<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">-->
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="css/site.css" type="text/css" media="screen,projection">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="myCarousel" class="carousel slide">
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>

                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://www.nasa.gov/images/content/662916main_image_2292_800-600.jpg" alt="">
                        </div>
                        <div class="item">
                            <img src="http://www.nasa.gov/images/content/200370main_rs_image_feature_827_800x600.jpg" alt="">
                        </div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<!--<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>

<script>
    $(document).ready(function () {
        $('.carousel').carousel({
            interval: 2000
        })
    });
</script>
于 2013-06-28T00:30:29.330 に答える
0

これは実際の例です。私にとっては完璧に機能しているので、あなたにとってはうまくいくかもしれません。

        <div class="carousel slide" id="theCarousel" data-interval="3000">
        <ol class="carousel-indicators">
        <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#theCarousel" data-slide-to="1"></li>
        <li data-target="#theCarousel" data-slide-to="2"></li>
        </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">Resting In Style</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">The Dude Look</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">How z It??</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
            </div> 
            <a href="#theCarousel" class="carousel-control left" data-slide="prev">
                    <span class="icon-prev"></span>
                </a>
            <a href="#theCarousel" class="carousel-control right" data-slide="next">
                    <span class="icon-next"></span>
                </a>            
    </div>

jsfiddle の出力を使用して、こちらのライブ デモをご覧ください。Twiter Bootstrap 3のカルーセル画像スライダー

于 2014-01-09T12:39:38.690 に答える