需要帮助制作引导轮播。它不工作答案

【问题标题】：Need help making a bootstrap Carousel. It's not working需要帮助制作引导轮播。它不工作
【发布时间】：2021-05-08 19:26:37
【问题描述】：

我目前被困在我的项目的一部分上，我似乎无法在每个图像之间进行这种轮播。代码现在看起来像这样：

<!DOCTYPE HTML>    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
        <link href = "css/style.css" rel = "stylesheet" type = "text/css">
        <title>Document</title>
    </head>
    <body>
        <main id = "main-text">
                <nav class = 'navbar navbar-dark bg-dark'>
                    <div id = 'top-nav' class = 'container'>
                        <img src = '/vapeShop/images/img1.png' alt = '' width = '15%' height = '15%'>
                        <a id = 'nav-link light' class = 'navbar link' href = '#'>
                            Brand Name
                        </a>
                        <a id = 'nav-link light' class = 'navbar-link' href = '#'>
                            Locations
                        </a>
                    </div>
                </nav>

                <div id="topCarousel" class="carousel slide mt-4 bg-dark" data-ride = 'carousel'>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img id = 'carousel-imgs' class="d-block w-100" src="/vapeShop/images/img2.png" alt="First slide">
                      </div>
                      <div class="carousel-item">
                        <img id = 'carousel-imgs' class="d-block w-100" src="/vapeShop/images/img3.jpg" alt="Second slide">
                      </div>
                      <div class="carousel-item">
                        <img id = 'carousel-imgs' class="d-block w-100" src="/vapeShop/images/img4.jpg" alt="Third slide">
                      </div>
                    </div>
                    <a class="carousel-control-prev" href="#topCarousel" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only"></span>
                    </a>
                    <a class="carousel-control-next" href="#topCarousel" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only"></span>
                    </a>
                </div>
            </main>
            
        </body>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
        <script src = "js/app.js"></script>
        </html>

每当我点击 V 形时，轮播只是拒绝进入下一张图片。有什么我遗漏的吗？

【问题讨论】：

您能否为此提供一些实时工作示例？调试会有帮助
app.js、style.css 等中有什么，这些有关系吗？

标签： html carousel bootstrap-5

【解决方案1】：

    <!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
      <link href="css/style.css" rel="stylesheet" type="text/css">
      <title>Document</title>
   </head>
   <body>
      <!-- begin snippet: js hide: false console: true babel: false -->
      <!-- language: lang-html -->
      <main id="main-text">
         <nav class='navbar navbar-dark bg-dark'>
            <div id='top-nav' class='container'>
               <img src='/vapeShop/images/img1.png' alt='' width='15%' height='15%'>
               <a id='nav-link light' class='navbar link' href='#'>
               Brand Name
               </a>
               <a id='nav-link light' class='navbar-link' href='#'>
               Locations
               </a>
            </div>
         </nav>
         <div id="topCarousel" class="carousel slide mt-4 bg-dark" data-ride='carousel'>
            <div class="carousel-inner">
               <div class="carousel-item active">
                  <img id='carousel-imgs' class="d-block w-100" src="/vapeShop/images/img2.png" alt="First slide">
               </div>
               <div class="carousel-item">
                  <img id='carousel-imgs' class="d-block w-100" src="/vapeShop/images/img3.jpg" alt="Second slide">
               </div>
               <div class="carousel-item">
                  <img id='carousel-imgs' class="d-block w-100" src="/vapeShop/images/img4.jpg" alt="Third slide">
               </div>
            </div>
            <a class="carousel-control-prev" href="#topCarousel" role="button" data-bs-target="#topCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#topCarousel" role="button" data-bs-target="#topCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only"></span>
            </a>
         </div>
      </main>
   </body>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
   <script src="js/app.js"></script>
</html>

您只需要在下一个之前的链接中添加data-bs-target="#topCarousel" data-bs-slide="prev" 属性。

<a class="carousel-control-prev" href="#topCarousel" role="button" data-bs-target="#topCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#topCarousel" role="button" data-bs-target="#topCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>

【讨论】：