web-dev-qa-db-ja.com

Bootstrap 3カルーセルが機能しない

Bootstrapからのカルーセルは、画像を表示したり、コントロールに反応しません。

これは私のHTMLです：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Skates R Us</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/global.css">
    </head>

    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">
                        Skates R Us
                    </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact / About</a>
                        </li>
                        <li>
                            <a href="shop.html">Shop</a>
                        </li>
                        <li>
                            <a href="new.html">New Products</a>
                        </li>
                        <li>
                            <a href="media.html">Media</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="carousel" data-slide-to="0"></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">
                    <img src="img/slide_1.png" alt="Slide 1">
                </div>
                <div class="item">
                    <img src="img/slide_2.png" alt="Slide 2">
                </div>
                <div class="item">
                    <img src="img/slide_3.png" alt="Slide 3">
                </div>
            </div>
            <a href="#carousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $("#carousel").carousel();
        </script>
    </body>
</html>

私のCSS：

#carousel {

    margin-top: 50px;

}

.carousel {
    height: 500px;
    margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
    width: 100%;
    height: 500px;
    background-color: #777;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

@media (min-width: 768px) {
    .carousel-caption p {
            margin-bottom: 20px;
            font-size: 21px;
            line-height: 1.4;
    }
}

img {
    background: red;
}

Chromeコンソールにエラーはなく、コードはBootstrap=の例とまったく同じです。

私の側では、これがサイトの外観です。 Site

htmlcsstwitter-bootstraptwitter-bootstrap-3carousel
15
Liam Potter

ここには2つの小さなことがあります。

1つ目は、次のカルーセルインジケーターリスト項目です。

<li data-target="carousel" data-slide-to="0"></li>

data-target属性にselectorを渡す必要があります。つまり、IDの前に#を付ける必要があります。次のように変更します。

<li data-target="#carousel" data-slide-to="0"></li>

次に、カルーセルに開始点を与える必要があるため、カルーセルインジケーターアイテムとカルーセル内部アイテムの両方に1つのactiveクラスが必要です。このような：

<ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <!-- Other Items -->
</ol>
<div class="carousel-inner">
    <div class="item active">
        <img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" />
    </div>
    <!-- Other Items -->
</div>

フィドルでの作業デモ

20
KyleMit

ここにあなたがする必要がある変更があります

カルーセルdivを以下のコードに置き換えるだけです

データターゲットの「＃」が欠落しているため、最初のアイテムにアクティブなクラスを追加します

<div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0"></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/slide_1.png" alt="Slide 1">
                </div>
                <div class="item">
                    <img src="img/slide_2.png" alt="Slide 2">
                </div>
                <div class="item">
                    <img src="img/slide_3.png" alt="Slide 3">
                </div>
            </div>
            <a href="#carousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
1
Adarsh Gowda K R

まあ、Bootstrap Carouselには制御するためのさまざまなパラメーターがあります。

つまり.

Interval：各スライド間の遅延（ミリ秒単位）を指定します。

pause：マウスポインターがカルーセルに入ったときにカルーセルが次のスライドを通過するのを一時停止し、マウスポインターがカルーセルを離れるとスライドを再開します。

wrap：カルーセルがすべてのスライドを連続して通過するか、最後のスライドで停止するかを指定します

ご参考までに：

enter image description here

詳細については ここをクリックしてください...

これがあなたを助けることを願っています:)

注：これはさらなるヘルプのためです。

1
Vikash Pandey

最近、友人がカルーセルが機能しない理由を見つけるのを手伝っていました。コントロールは機能せず、画像は移行しませんでした。使用したページに実際のサンプルがあり、この投稿の上記の項目のチェックを含むすべてのコードを調べました。 「良い」カルーセルを同じページに貼り付けましたが、それでも動作しました。これで、すべてのcssファイルとbootstrap=ファイルは両方とも同じでした。コードは同じになったため、試してみたのは画像だけでした。

そのため、サンプルで機能していた2つの画像に置き換えました。出来た。 2つの画像を最初は機能していなかった最初の2つの画像に置き換えたところ、機能しました。各画像（すべてのjpeg）を1つずつ追加し直し、（18枚の）7番目の画像に到達すると、カルーセルが失敗しました。奇妙な。この1つのイメージを削除し、残りのイメージをすべて追加し、カルーセルが機能するまで追加し続けました。

参考のため、このサイトではjquery-3.3.1.slim.min.jsとbootstrap/4.3.1/js/bootstrap.min.jsを使用していました。

画像がカルーセルの誤動作を引き起こす、または引き起こす可能性のある理由を私は知りませんが、そうしました。私は他の場所でもこの原因への参照を見つけることができなかったので、他の解決策が失敗したときに他の誰かを助けることを期待して後世のためにここに投稿しています。

「既知の良い」画像の限られたセットでカルーセルをテストします。

1
srattigan

私にとって、カルーセルは、DreamWeaver CCで動作していませんでした。これは、遊んでいる「テンプレート」ページのコードを提供していました。カルーセルdivが動作を開始するには、data-ride = "carousel"属性をカルーセルdivに追加する必要がありました。不足している属性を強調したコードスニペットを提供してくれたAdarshに感謝します。

0
Paulepops