javascript - Bootstrap 5 Carousel styling

Question

I am trying to imitate this testimonial design using bootstrap 5 that I saw on the web:

What I did is that I used bootstrap 5's carousel to imitate this. So far here's my 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>

You can see the actual code here: https://jsfiddle.net/eoh80w95/

If you will look on the actual code link, you will notice a few things such as the box of each carousel are being cut off, same goes with the avatar images, its also cutting off the black border that I place above the image, at the top of all if the content text is too many and you slide to the next slide, it will just change the height of the slide which doesn't look nice.

Not sure why this is happening. Please help me to achieve the same design.

question from:https://stackoverflow.com/questions/65912299/bootstrap-5-carousel-styling

Answer 1

For displaying the img properly

.carousel-inner {
  overflow: visible;
}

---

To get a fixed height for all items:

.carousel-item {
  height: 400px;
}

---

To hide the scrollbar:

body {
    overflow-x: hidden;
}

---

To style the indicators:

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

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

---

Codepen: https://codepen.io/manaskhandelwal1/pen/qBaeypm?editors=1100