ブートストラップ カルーセルが移動できない場合はどうすればよいですか?

ブートストラップカルーセルが移動できない問題の解決策: 1. 使用しているブートストラップのバージョンを確認する; 2. js と css の参照順序を変更する; 3. 「data-ride="carousel」を追加する"" ステートメント; 4. 一貫性を保つために、カルーセル内の ID を変更するだけです。

この記事の動作環境: Windows 7 システム、ブートラップ バージョン 3.3.7、DELL G3 コンピューター

どうすればよいですかブートストラップ カルーセルが移動できない場合はどうすればよいでしょうか?

ブートストラップがカルーセルできない問題の解決策:

1. まず、最初にインポートするときに、どのバージョンのエクスポートされたテンプレートは、間違いを避けるために、そのバージョンの公式 Web サイトに直接アクセスして検索し、コピーすることができます。

ps: 他の人の例を直接コピーしてインポートしないでください。

例: bootstrap3.3.7 バージョンのインポートされたテンプレートの場合:

　<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
此处引用的插件来自于bootstrap官网！

2. js と css の引用順序が間違っており、css、jquery.js、最後に引用する必要があります。 bootstrap.js

理由: bootstrap.js は jquery.js

3 を使用する必要があります。デフォルトで Bootstrap の Carousel コンポーネントを使用します。自動化を実現するには、data-ride="carousel" を追加するだけです。再生。初期化されたjs関数を使用する必要はありません。したがって、カルーセルが自動的に再生されない場合は、まずこのセクションを確認してください。画像回転の時間間隔の設定など、他のパラメータをここに追加できます。

<div id="carousel-ad" class="carousel slide" data-ride="carousel" data-interval="2000">

4. カルーセル チャートのラベルのクラス コンテンツが、カルーセル チャートの div コンテナーの ID と一致しません。

例: ol リストの li タグ、data-ターゲット値は「#carousel -example-generic」である必要があります

div の easy id 属性は次のとおりです: id="carousel-example-generic"

<ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       .....</ol>

推奨される学習: 「」ブートストラップの使用法チュートリアル #>>

以上がブートストラップ カルーセルが移動できない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。