Bootsrap輪播問題：不顯示第二頁-有解無憂

所以我試圖在css flexbox中使用引導輪播。我的問題是我在 html 中犯了一些錯誤，并且輪播的第二張幻燈片沒有顯示出來。我可以使用下一個按鈕從第一張幻燈片移動，但它不顯示第二張并且保持空白。

這是我的html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <meta name="description" content="Unilab career acceleration project" /> -->
    <title>UniLab</title>
    <script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>

    <section class="news">
        <div id="flex-box-1">
            <div id="places">
                <h2>WORLD NEWS</h2>
                <hr>
                <h2>Amazing places in America to visit.</h2>
                <p>For some reason — this country, this city, this neighborhood, this particular street — ?is the place you are living a majority of your life in.</p>
                <button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
            </div>
        </div>



        <div id="flex-box-2" class="container">
            <div id="news-header" class="column">
                <div id='box-1'>
                    <h2>MORE NEWS</h2>
                </div>
                 
                 <div id='box-2'>
                   <div class="col-6 text-right">
                    <a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
                      <i class="fa-solid fa-angle-left"></i>
                    </a>
                    <a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
                      <i class="fa-solid fa-angle-right"></i>
                    </a>
                </div>
                </div>
            </div>

            <hr>
            <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="column">
                            <article class="card">
                                <h3 class="pink">TRAVEL</h3>
                                <h3 class="article-title">Article title</h3>
                                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                                <i class="fa-regular fa-clock"></i>
                                <span>2 mins ago</span>
                            </article>

                            <article class="card">
                                <h3 class="pink">TECHNOLOGY</h3>
                                <h3 class="article-title">Article title</h3>
                                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                                <i class="fa-regular fa-clock"></i>
                                <span>2 mins ago</span>
                            </article>
                        </div>

                    <div class="carousel-item">
                        <div class="column">
                            <article class="card">
                                <h3 class="pink">TRAVEL</h3>
                                <h3 class="article-title">Article title</h3>
                                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                                <i class="fa-regular fa-clock"></i>
                                <span>2 mins ago</span>
                            </article>

                            <article class="card">
                                <h3 class="pink">TECHNOLOGY</h3>
                                <h3 class="article-title">Article title</h3>
                                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                                <i class="fa-regular fa-clock"></i>
                                <span>2 mins ago</span>
                            </article>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
    </section>

    <!-- <script src="./scripts.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>    
  
  </body>
</html>

如果需要，這里也是我的 CSS

.news {
    display: flex;
    height: 600px;
    width: 100%;
}

#flex-box-1 {
    width: 50%;
    height: 100%;
    background-color: green;
}

#flex-box-2 {
    width: 50%;
    height: 100%;
    
}

提前感謝<3

uj5u.com熱心網友回復：

您carousel-item的嵌套不正確，因此當按鈕觸發active類更改時，它會將其應用于嵌套在不再可見的元素中的元素。當您執行這些操作時，請確保您檢查以確保您的專案位于carousel-inner您使用的任何框架中的主輪播容器內，而不是像您最初擁有的那樣在彼此內。如果您在瀏覽器檢查器中觀看它，您可以在使用導航箭頭時看到類的變化

Bootsrap 輪播問題：不顯示第二頁

.news {
  display: flex;
  height: 600px;
  width: 100%;
}

#flex-box-1 {
  width: 50%;
  height: 100%;
  background-color: green;
}

#flex-box-2 {
  width: 50%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- <meta name="description" content="Unilab career acceleration project" /> -->
  <title>UniLab</title>
  <script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

  <section class="news">
    <div id="flex-box-1">
      <div id="places">
        <h2>WORLD NEWS</h2>
        <hr>
        <h2>Amazing places in America to visit.</h2>
        <p>For some reason — this country, this city, this neighborhood, this particular street — ?is the place you are living a majority of your life in.</p>
        <button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
      </div>
    </div>
    <div id="flex-box-2" class="container">
      <div id="news-header" class="column">
        <div id='box-1'>
          <h2>MORE NEWS</h2>
        </div>
        <div id='box-2'>
          <div class="col-6 text-right">
            <a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
              <i class="fa-solid fa-angle-left"></i>
            </a>
            <a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
              <i class="fa-solid fa-angle-right"></i>
            </a>
          </div>
        </div>
      </div>
      <hr>
      <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="column">
              <article class="card">
                <h3 class="pink">TRAVEL</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
              <article class="card">
                <h3 class="pink">TECHNOLOGY</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
            </div>
          </div>
          <div class="carousel-item">
            <div class="column">
              <article class="card">
                <h3 class="pink">TRAVEL</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
              <article class="card">
                <h3 class="pink">TECHNOLOGY</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- <script src="./scripts.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/491987.html

標籤：javascript html css 引导程序 5

上一篇：使用正則運算式(JavaScript)驗證姓名和姓氏

下一篇：react-native中的雙重排序串列