web-dev-qa-db-ja.com

Bootstrap 3カルーセルは機能しません（はい、Bootstrapの前にjQueryをロードしています）

アプリケーションをBootstrap 3.に変換しています。これがサンプルカルーセルページのコード全体です。はい、Bootstrap.jsが読み込まれる前にjQueryが読み込まれています。何らかの理由でカルーセルは単に機能しません。具体的には、前/次のボタンが機能せず、カルーセルが自動的に次のスライドにスライドしません。

テスト対象：

  • Safari 6.0.5
  • Chrome 28.0.1500.95
  • Firefox 23.0

... Mac OS X 10.8.4の場合

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--[if lt IE 9]>
        <script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css">

    <title>Carousel Test</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <script>
        // Added this just so I didn't have to wait 5 seconds to see if the transition worked. //
        $(document).ready(function() {
            $('#Carousel').carousel({
                interval:   1000
            });
        });
    </script>
</head>

<body>
    <div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
        </div>

        <div class="carousel-inner">
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
        </div>

        <div class="carousel-inner">
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</body>
</html>

なぜこれが機能しないのかについて誰かが洞察を持っていますか？

jquerytwitter-bootstrapcarouseltwitter-bootstrap-3
10
David Byers

1つ試してくださいcarousel-inner複数のitemsが内部にあります。

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

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

デモ： http://bootply.com/72622

5
Zim

このコードには、カルーセルインジケーターがクリックできないという別の間違いがあります。それらは、適切なパネルに移動するリンクである必要があります。

データターゲットにハッシュタグを追加する必要があります。

<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
3
Stephen Hess

これは、すべてのコードを正しく記述しているにもかかわらず、私のように立ち往生している人を助けるためです。コードのエラーを見つけようとしましたが、すべて問題ありませんでした。次に、JavaScriptファイルを確認したところ、そのタイプが。js.txtに変更されていることに気付きました。だから私はそれを。jsに変更しただけでうまくいきました。

ハッピーコーディング！

0
Vishal Chhatwani