Bootstrap 5 輪播樣式

Question

我正在嘗試使用我在 web 上看到的引導程序 5 來模仿這個證明設計：

我所做的是我使用bootstrap 5 的輪播來模仿這個。 到目前為止，這是我的 HTML

   <div class="container">
       <div class="row">
           <div class="col-lg-6 mx-auto mt-5">
            <div id="testimonialSlider" class="carousel carousel-dark slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active" data-bs-interval="10000">
                    <div class="testimonial_img">
                        <img alt="testimonial img" src="https://i.imgur.com/nnYiOn1.png">
                    </div>
                        <div class="testimonial_content xs-mt-40">
                            <div class="testimonial_content_item mb-30">
                                <div class="testimonial_content__pro">
                                    <h4 class="mb-10">Mark Croas</h4>
                                    <p>Owner, X Meals</p>
                                </div>
                                <ul>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                </ul>
                            </div>
                            <div>
                                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."

                                </p>
                            </div>
                        </div>
                  </div>

                  <div class="carousel-item" data-bs-interval="2000">
                    <div class="testimonial_img">
                        <img alt="testimonial img" src="https://i.imgur.com/nnYiOn1.png">
                    </div>
                        <div class="testimonial_content xs-mt-40">
                            <div class="testimonial_content_item mb-30">
                                <div class="testimonial_content__pro">
                                    <h4 class="mb-10">John Croas</h4>
                                    <p>Owner, X Meals</p>
                                </div>
                                <ul>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                </ul>
                            </div>
                            <div>
                                <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer needs and the collaborative skills that's needed to produce excellent work.</p>
                            </div>
                        </div>
                  </div>

                  <div class="carousel-item">
                    <div class="testimonial_img">
                        <img alt="testimonial img" src="https://i.imgur.com/nnYiOn1.png">
                    </div>
                        <div class="testimonial_content xs-mt-40">
                            <div class="testimonial_content_item mb-30">
                                <div class="testimonial_content__pro">
                                    <h4 class="mb-10">Mar Croas</h4>
                                    <p>Owner, X Meals</p>
                                </div>
                                <ul>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                </ul>
                            </div>
                            <div>
                                <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exersiness design needs and the collaborative skills that's needed to produce excellent work.</p>
                            </div>
                        </div>
                  </div>

              </div>

              <ol class="carousel-indicators">
                <li data-bs-target="#testimonialSlider" data-bs-slide-to="0" class="active"></li>
                <li data-bs-target="#testimonialSlider" data-bs-slide-to="1"></li>
                <li data-bs-target="#testimonialSlider" data-bs-slide-to="2"></li>
              </ol>
           </div>
            

           </div>

   </div>

您可以在此處查看實際代碼： https://jsfiddle.net/eoh80w95/

如果您查看實際的代碼鏈接，您會注意到一些東西，例如每個輪播的框被切斷，頭像圖像也是如此，它也切斷了我放置在圖像上方的黑色邊框，在最重要的是，如果內容文本太多並且您滑動到下一張幻燈片，它只會改變幻燈片的高度，這看起來不太好。

不知道為什么會這樣。 請幫助我實現相同的設計。

Answer 1

用於正確顯示 img

.carousel-inner {
  overflow: visible;
}

---

要獲得所有項目的固定高度：

.carousel-item {
  height: 400px;
}

---

要隱藏滾動條：

body {
    overflow-x: hidden;
}

---

要設置指標樣式：

.carousel-indicators li{
  height: 10px;
}

.carousel-indicators li.active{
  background-color: red;
}

---

代碼筆： https://codepen.io/manaskhandelwal1/pen/qBaeypm?editors=1100