What should I do if the bootstrap carousel cannot move?

The solution to the problem that the bootstrap carousel cannot be moved: 1. Confirm the version of bootstrap used; 2. Modify the order of referencing js and css; 3. Add the "data-ride="carousel"" statement; 4. Just change the IDs in the carousel to be consistent.

The operating environment of this article: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

What should I do if the bootstrap carousel cannot move?

Solution to the problem that bootstrap cannot carousel:

1. First of all, when importing at the beginning, you should pay attention to which version of bootstrap you are using. The exported template can Go directly to the official website of that version to search and copy it to avoid making mistakes.

ps: Never directly copy other people’s examples and import them.

For example, regarding the imported template of bootstrap3.3.7 version:

　<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. The order of quoting js and css is wrong. It must be css, then jquery.js, and finally bootstrap.js

Reason: bootstrap.js needs to use jquery.js

3. Use Bootstrap’s Carousel component by default. You only need to add data-ride="carousel" to achieve automatic playback. No need to use initialized js function. So, if the carousel won't play automatically, then check this section first. Other parameters can be added here, such as setting the time interval for image rotation.

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

4. The class content of the label in the carousel chart is inconsistent with the id of the carousel chart div container

For example: the li tag in the ol list, the data-target value must be "#carousel -example-generic"

Because the easy id attribute of div is: id="carousel-example-generic"

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

Recommended learning: "bootstrap usage tutorial》

The above is the detailed content of What should I do if the bootstrap carousel cannot move?. For more information, please follow other related articles on the PHP Chinese website!