Bootstrap 4轮播图无法切换的问题排查求助

数据老陈

2026-5-8

解决Bootstrap 4轮播无法切换的问题

嘿，我帮你排查出几个导致轮播无法正常切换的问题，一个个来修复：

JS引入顺序完全搞反了：Bootstrap 4的JS必须依赖jQuery和Popper.js才能运行，正确的引入顺序应该是：先加载jQuery，再加载Popper.js，最后加载Bootstrap的JS文件。你之前把Bootstrap JS放在最前面，导致依赖没加载，轮播的交互逻辑根本跑不起来。
重复引入不同版本的Bootstrap CSS：你同时加了4.1.3和4.5.0两个版本的Bootstrap样式表，版本冲突可能引发各种奇怪的问题，保留一个最新的版本就好。
HTML结构有错误：代码里重复写了<html>标签，浏览器解析的时候会出问题，得删掉多余的那个。
指示器和幻灯片数量不匹配：你加了11个轮播指示器，但实际只有10个菜品幻灯片，多余的指示器会干扰轮播的切换逻辑，把最后一个指示器删掉就行。

下面是修复后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> bootstrap exercises </title>
    <!-- 只保留一个最新版本的Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <!-- data-ride calls the javascript, via bootstrap needed for the carousel to be animated -->
                <div data-ride="carousel" id="my-slider" class="carousel slide" data-keyboard="false" data-interval="1500" >
                    <!-- indicators -->
                    <ul class="carousel-indicators">
                        <li data-target="#my-slider" data-slide-to="0" class="active">0</li>
                        <li data-target="#my-slider" data-slide-to="1" ></li>
                        <li data-target="#my-slider" data-slide-to="2" ></li>
                        <li data-target="#my-slider" data-slide-to="3" ></li>
                        <li data-target="#my-slider" data-slide-to="4"></li>
                        <li data-target="#my-slider" data-slide-to="5" ></li>
                        <li data-target="#my-slider" data-slide-to="6" ></li>
                        <li data-target="#my-slider" data-slide-to="7" ></li>
                        <li data-target="#my-slider" data-slide-to="8" ></li>
                        <li data-target="#my-slider" data-slide-to="9" ></li>
                        <!-- 删掉了多余的第11个指示器 -->
                    </ul>
                    <!-- wrapper for slides-->
                    <div class="carousel-inner " >
                        <div class="carousel-item active">
                            <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/11/19/12/44/burgers-1839090__340.jpg" alt=" juicy flamed grill">
                            <div class="carousel-caption">
                                <p> Here a picture of our juicy flamed grill burger </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2020/02/24/15/14/parsley-4876518__340.jpg" alt="do not feel guilty pasta plate ">
                            <div class="carousel-caption">
                                <p> Here a picture of our pasta plate </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2015/08/19/01/02/avocado-895361__340.jpg" alt=" sweet potatoes fries">
                            <div class="carousel-caption">
                                <p>Sweet potatoes fries with 2 sauces and spices </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2018/07/17/12/43/steak-3544070__340.jpg" alt="Irish grilled steak with 5% only fat ">
                            <div class="carousel-caption">
                                <p> Here a picture of our famous irish steak </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2019/10/13/14/23/spaghetti-bolognese-4546233__340.jpg " alt="spaghetti bolognese">
                            <div class="carousel-caption">
                                <p> Spaghetti bolognese with 0% fat beef and fresh tomatoes/mushrooms </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100" src=" https://cdn.pixabay.com/photo/2016/03/05/20/07/abstract-1238657__340.jpg" alt="Entry : tuna peaches, Main course : celtic lamb, Desert : proteined bananas ">
                            <div class="carousel-caption">
                                <p>Entry : tuna peaches, Main course : celtic lamb, Desert : proteined bananas </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/04/06/17/45/salmon-1312372__340.jpg" alt=" scottish salmone">
                            <div class="carousel-caption">
                                <p> Entry : 10g of caviar layed on a rice leaf, Main course : rare piece of Salmone from Scotland, Desert : top quality belgian chocolate </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100" src="https://cdn.pixabay.com/photo/2018/02/07/08/50/kobe-3136608__340.jpg" alt="Piece of Wagyu beef : 150g ">
                            <div class="carousel-caption">
                                <p>Piece of Wagyu beef : 150g </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/08/01/22/08/buffet-1562290__340.jpg" alt=" assiette mixte">
                            <div class="carousel-caption">
                                <p> assiette mixte : vegetables </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class ="d-block w-100" src="https://media.istockphoto.com/photos/cold-smoked-meat-platter-snacks-set-picture-id1159740379?b=1&k=6&m=1159740379&s=170667a&w=0&h=JsuWStBo_Alh2g0DLjLpX4sq1DiFL9znEV1mfrsbyeA=" alt=" mix viande">
                            <div class="carousel-caption">
                                <p> assiette mixte : viande</p>
                            </div>
                        </div>
                    </div>
                    <!-- next and prev buttons -->
                    <a class= "carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"> </span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class=" carousel-control-next" href="#my-slider" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"> </span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 修正JS引入顺序：jQuery → Popper.js → Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Bastien Deresteau