0

Bootstrap carouselWeb ページで使用していますが、コンソールに次のエラーが表示されます。

TypeError: $(...).carousel is not a function

と をインポートbootstrap.jsjquery-1.8.3.min.jsましたが、ページの読み込み時にカルーセルがスライドしません。何が問題なのか理解できません。これが私のコードです:

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

<script type="text/javascript">
        $('#myCarousel').carousel({
            interval: 2000
        })
    </script>

本文の構文:

<div>
    <center>
    <div id="myCarousel" class="carousel slide" style="width:800px; height:400px;">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
    <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item"><img style="width:800px; height:400px" src="img/c4.jpg">
                <div class="carousel-caption">
                    <h4>Heading</h4>
                    <p>like never before...</p>
                </div>
            </div>
            <div class="item"><img style="width:800px; height:400px" src="img/c3.jpg"></div>
            <div class="item"><img style="width:800px; height:400px" src="img/c3.jpg"></div>
            <div class="item"><img style="width:800px; height:400px" src="img/c4.jpg"></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>
    </center>
</div>
4

1 に答える 1

1

ブートストラップの前に jQuery をインポートします。bootstrap.js は jQuery の上に構築されるため、ブートストラップを初期化する前にロードする必要があります。

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

<script type="text/javascript">
    $('#myCarousel').carousel({
        interval: 2000
    })
</script>
于 2013-06-17T11:43:14.573 に答える