Bootstrap 4 Carousel 控制按钮不工作

问题描述

我不确定我做错了什么，但由于某种原因，bootstrap 4 carousel 控件无法正常工作，如果有人可以提供帮助，我将不胜感激。我已经玩了大约一个小时的代码，所以我想我会得到第二个意见，看看发生了什么。

我查看了引导程序文档，然后复制并粘贴了控件。我看了看课程，一切看起来都一样

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
 <!-- REVIEWS -->

<div id="reviews" class="py-3 bg-green" style="background: #186160;">

    <div class="customer-reviews  d-block text-center">
        <h4> <strong> Customer Reviews </strong></h4>
        <div style="color: #ffd400;"> &#9733; &#9733; &#9733; &#9733; &#9733;</div>

        <!-- SLIDER -->

    <div class="col-lg-10 offset-lg-1  text-light">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" >
            <div class="carousel-inner" role="listBox">
                <!-- SLIDER 1 -->
                <div class="carousel-item active text-center pt-4 ">
                    <blockquote class="blockquote text-center">
                        <div class="d-flex justify-content-around">
                            <div>
                                <p class="mb-0"><i class=" "></i> "I absolutely love this site,probably better than cebook"</p>
                                <p style="color: #ffd400;">Tomi_Jug****</p>
                            </div>
                            <div>
                                <p class="mb-0"><i class=" "></i> "I love all the users on this site,everyone is fun to talk with."</p>
                                <p style="color: #ffd400;">Chris****</p>
                            </div>

                        </div>
                    </blockquote>
        </div>
    <!-- SLIDER 2 -->
        <div class="carousel-item  text-center pt-4 ">
            <blockquote class="blockquote text-center">
                <div class="d-flex justify-content-around">
                    <div>
                        <p class="mb-0"><i class=" "></i> "I like the freedom it gives me to express,in a safe manner."</p>
                        <p style="color: #ffd400;">YoruUs**</p>
                    </div>
                    <div>
                        <p class="mb-0"><i class=" "></i> "I love that it's easy to chat with someone. You have a great mobile app. Easy to use."</p>
                        <p style="color: #ffd400;">HG****</p>
                    </div>

                </div>
            </blockquote>
        </div>
        <!-- SLIDER 3 -->
        <div class="carousel-item  text-center pt-4 ">
            <blockquote class="blockquote text-center">
                <div class="d-flex justify-content-around">
                    <div>
                        <p class="mb-0"><i class=" "></i> "I like that the site has cool people on it,and I can almost always meet someone new."</p>
                        <p style="color: #ffd400;">Wet an******</p>
                    </div>
                    

                </div>
            </blockquote>
        </div>

        <!-- Left and right controls -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
          <span class="carousel-control-next-icon"></span>
      </a>

        
    </div>
    
    <!-- SLIDER -->

  <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>

解决方法

ID 不同。

更改为

    <!-- Left and right controls -->
             <a class="carousel-control-prev" href="#carouselExampleControls" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
             </a>
             <a class="carousel-control-next" href="#carouselExampleControls" data-slide="next">
            <span class="carousel-control-next-icon"></span>
         </a>

并检查

bootstrap-4 html