Javascript Bootstrap 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>

马克·克罗斯
主人，X餐








“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”

约翰·克罗斯
主人，X餐








临时性的劳动和生产许可证。Ut enim ad minim veniam、quis nostrud exer需要和产生优秀作品所需的协作技能

马尔克罗斯
主人，X餐








临时性的劳动和生产许可证。Ut enim ad minim veniam，quis nostrud练习设计需求和制作优秀作品所需的协作技能

您可以在此处看到实际代码：

如果你看一下实际的代码链接，你会注意到一些事情，比如每个旋转木马的盒子都被切断了，头像图像也是如此，它也会切断我放在图像上方的黑色边框，如果内容文本太多，你会滑到下一张幻灯片，这只会改变滑梯的高度，看起来不太好看

---

不知道为什么会这样。请帮助我实现相同的设计。

以便正确显示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;
}

---

---

Codepen:

如果文本太多，我仍然可以看到旋转木马的高度发生变化。另外，我如何更改底部引导导航的颜色和厚度？@MasakiUeda您指的是导航的三行。当您更改或单击下一个幻灯片时，底部甚至有一个滚动条，我指的是导航在底部有三行。此外，它看起来也不太好看，因为它会在下面的位置滚动更改itLook的高度：