Bootstrap 4轮播下一个和上一个按钮在一个页面上不起作用，但在其他页面上工作正常答案

【问题标题】：Bootstrap 4 carousel next and prev buttons are not working on one page but works fine on otherBootstrap 4轮播下一个和上一个按钮在一个页面上不起作用，但在其他页面上工作正常
【发布时间】：2020-08-31 13:25:37
【问题描述】：

这个轮播在一个网页上运行良好（自动滑动并带有按钮），但是当我将此代码输入到我的索引页面时，它会自动滑动但不带有按钮（上一个，下一个）。以下是代码：

（整个是这个错误的完整细节，我正在使用 html5 和 Bootstrap4）

<div class="container-fluid pb-5">
        <div class="row">
            <div class="col-12 text-center mt-3">
                <h1 class="mx-auto mt-5 afterline">Programs & Projects</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-6 col-xs-4 mt-4">
                <select id="select_featured_project" class="float-right px-xl-5 px-lg-5 px-md-5 px-4  py-3">
                    <option value="featured">Featured</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
            </div>
            <div class="col-6 col-xs-4 mt-4">
                <select id="select_design_tech" class="px-xl-5 px-lg-5 px-md-5 px-2  py-3">
                    <option value="featured">Design & Tech</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
            </div>
        </div>
        <!-- Carousel row -->
        <div class="row">
            <div class="col-12">
                <div id="carouselExampleControls" class="carousel slide mt-5" data-ride="carousel">

                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="container p-4">
                            <!-- row 1 -->
                            <div class="row justify-content-center">
                                    <div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
                                        <h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
                                        <h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
                                        <i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
                                        <i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">

                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">

                                    </div>
                                </div>
                                <!-- row 1 ends -->

                                <!-- row 2 -->
                               <div class="row justify-content-center mt-3">
                                    <div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
                                        <h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
                                        <h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
                                        <i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
                                        <i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">

                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">

                                    </div>
                                </div>
                                 <!-- row 2 ends -->
                            </div>
                            <!-- container ends -->
                        </div>
                        <!-- carousel-item slide 1 ends -->

                        <div class="carousel-item">
                            <div class="container p-4">
                            <!-- row 1 -->
                            <div class="row justify-content-center">
                                    <div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
                                        <h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
                                        <h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
                                        <i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
                                        <i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">

                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">

                                    </div>
                                </div>
                                <!-- row 1 ends -->

                                <!-- row 2 -->
                                <div class="row justify-content-center mt-3">
                                    <div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
                                        <h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
                                        <h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
                                        <i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
                                        <i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">

                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">

                                    </div>
                                </div>
                                <!-- row 2 ends -->
                            </div>
                            <!-- container ends -->
                        </div>
                        <!-- carousel-item slide 2 ends -->
                    </div>
                    <!-- carousel-inner ends -->
                    <a class="carousel-control-prev" style="color:black" href="#carouselExampleControls" role="button" data-slide="prev">
                        <!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
                        <!--visible on xl-->
                        <span><i class="d-none d-xl-block fas fa-chevron-left fa-10x fa-lg fa-sm fa-xs" aria-hidden="true"></i></span>
                        <!-- visible on lg -->
                        <span><i class="d-none d-lg-block d-xl-none fas fa-chevron-left fa-8x" aria-hidden="true"></i></span>
                        <!-- visible on md -->
                        <span><i class="d-none d-md-block d-lg-none fas fa-chevron-left fa-6x" aria-hidden="true"></i></span>
                        <!-- visible on sm -->
                        <span><i class="d-none d-sm-block d-md-none fas fa-chevron-left fa-4x" aria-hidden="true"></i></span>
                        <!-- visible on xs -->
                        <span><i class="d-block d-sm-none fas fa-chevron-left fa-2x" aria-hidden="true"></i></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" style="color:black;" href="#carouselExampleControls" role="button" data-slide="next">
                        <!--visible on xl-->
                        <span><i class="d-none d-xl-block fas fa-chevron-right fa-10x fa-lg fa-sm fa-xs" aria-hidden="true"></i></span>
                        <!-- visible on lg -->
                        <span><i class="d-none d-lg-block d-xl-none fas fa-chevron-right fa-8x" aria-hidden="true"></i></span>
                        <!-- visible on md -->
                        <span><i class="d-none d-md-block d-lg-none fas fa-chevron-right fa-6x" aria-hidden="true"></i></span>
                        <!-- visible on sm -->
                        <span><i class="d-none d-sm-block d-md-none fas fa-chevron-right fa-4x" aria-hidden="true"></i></span>
                        <!-- visible on xs -->
                        <span><i class="d-block d-sm-none fas fa-chevron-right fa-2x" aria-hidden="true"></i></span>
                        <span class="sr-only">Next</span>
                    </a>
                    <!-- carousel-controls ends -->

                </div>
            </div>
        </div>
        <!--Carousel row ends -->
</div>

引导 CDN

<!--DISABLE ZOOMING -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./styles/style.css">
    <!-- <link rel="stylesheet" type="text/css" href="./styles/bootstrap-4.4.1/css/bootstrap.min.css"> -->

jQuery CDN

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/37a1f2cd33.js" crossorigin="anonymous"></script>

【问题讨论】：

浏览器控制台是否有任何错误输出？您在浏览器的网络选项卡中链接到的所有文件是否收到 200 条响应？
没有错误。
该项目没有在索引页面上使用按钮滑动。但它在第二页上运行良好。

标签： javascript jquery bootstrap-4 html5-canvas

【解决方案1】：

这个问题是因为多个轮播的ID相同。

【讨论】：