Bootstrap 5 Testimonial Slider #2

September 5, 2023

Another simple responsive Bootstrap 5 testimonial slider using the Bootstrap carousel with multiple items.

Final output:

1. I’ll be using the Bootstrap 5 Carousel Multiple Items slider from a previous post for the Bootstrap testimonial slider.

(Rerun when changing sizes)

For Bootstrap 5.2+, add wrap: false to stop the continuous cycle.

var carousel = new bootstrap.Carousel(multipleCardCarousel, {
  interval: false,
  wrap: false,
});

2. Install Bootstrap icons. Add the quotes icon inside the card. Wrap it in a div and use the display class to increase its size. Change the font color using the class text-body-tertiary.

<div class="display-2 text-body-tertiary">
    <i class="bi bi-quote"></i>
</div>

Remove the button. Place the image and the card title inside another div in the card body below the card-text. Let’s remove the img-wrapper div and use even-size images. Use flex to align items. And add some padding on top.

<div class="d-flex align-items-center pt-2">
    <img src="..." alt="">
    <div>
        <h5 class="card-title fw-bold">Jane Doe</h5>
        <span class="text-secondary">CEO, Example Company</span>
    </div>
</div>

Remove the img-wrapper and img styles and use this instead. Specify the image width and height. For a circular image, set the border radius to 50% and overflow to hidden. Add some right margin.

.carousel img {
  width: 70px;
  max-height: 70px;
  border-radius: 50%;
  margin-right: 1rem;
  overflow: hidden;
}

This is how the testimonial card HTML should look:

<div class="card">
    <div class="quotes display-2 text-body-tertiary">
        <i class="bi bi-quote"></i>
    </div>
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
            the card's content.</p>
        <div class="d-flex align-items-center pt-2">
            <img src="..." alt="">
            <div>
                <h5 class="card-title fw-bold">Jane Doe</h5>
                <span class="text-secondary">CEO, Example Company</span>
            </div>
        </div>
    </div>
</div>

Output:

3. Let’s display three cards only on large screens. For screens with a width of 576px to 1024px, display only two cards.

@media screen and (min-width: 576px) {
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 2);
  }
}
@media screen and (min-width: 1024px) {
  .carousel-item {
    flex: 0 0 calc(100% / 3);
  }
}

Let’s place the carousel controls away from the cards(currently overlapping).

.carousel-inner {
  display: flex;
  width: 90%;
  margin-inline: auto;
  padding: 1em 0;
  overflow: hidden;
}

Output:

4. You can change the box shadow for the card. I’m changing to a smaller shadow using the Bootstrap class shadow-sm. Set the border to 0. Change the border-radius too(rounded-3).

<div class="card shadow-sm border-0 rounded-3">

Change the background color for the controls.

.carousel-control-prev,
  .carousel-control-next {
    width: 3rem;
    height: 3rem;
    background-color: grey;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
  }

Output:

Video tutorial for Bootstrap 5 Testimonial Slider #2:

Final Output Code for Bootstrap 5 Testimonial Carousel Slider #2:

HTML

<div class="container bg-body-tertiary py-3">
    <div id="testimonialCarousel" class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">Jane Doe</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">June Doe</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">John Doe</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">Card title 4</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">Card title 5</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">Card title 6</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">Card title 7</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">Card title 8</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card shadow-sm rounded-3 p-2">
                    <div class="quotes display-2 text-body-tertiary">
                        <i class="bi bi-quote"></i>
                    </div>
                    <div class="card-body">
                        <p class="card-text">"Some quick example text to build on the card title and make up the
                            bulk of
                            the card's content."</p>
                        <div class="d-flex align-items-center pt-4">
                            <img src="..." alt="">
                            <div>
                                <h5 class="card-title fw-bold">Card title 9</h5>
                                <span class="text-secondary">CEO, Example Company</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>

CSS

.carousel img {
  width: 70px;
  max-height: 70px;
  border-radius: 50%;
  margin-right: 1rem;
  overflow: hidden;
}
.carousel-inner {
  padding: 1em;
}

@media screen and (min-width: 576px) {
  .carousel-inner {
    display: flex;
    width: 90%;
    margin-inline: auto;
    padding: 1em 0;
    overflow: hidden;
  }
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 2);
  }
}
@media screen and (min-width: 1024px) {
  .carousel-item {
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100% / 3);
  }
}
.carousel .card {
  margin: 0 0.5em;
  border: 0;
}

.carousel-control-prev,
.carousel-control-next {
  width: 3rem;
  height: 3rem;
  background-color: grey;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

jQuery

const multipleItemCarousel = document.querySelector("#testimonialCarousel");

if (window.matchMedia("(min-width:576px)").matches) {
  const carousel = new bootstrap.Carousel(multipleItemCarousel, {
    interval: false,
  });

  var carouselWidth = $(".carousel-inner")[0].scrollWidth;
  var cardWidth = $(".carousel-item").width();

  var scrollPosition = 0;

  $(".carousel-control-next").on("click", function () {
    if (scrollPosition < carouselWidth - cardWidth * 3) {
      console.log("next");
      scrollPosition = scrollPosition + cardWidth;
      $(".carousel-inner").animate({ scrollLeft: scrollPosition }, 800);
    }
  });
  $(".carousel-control-prev").on("click", function () {
    if (scrollPosition > 0) {
      scrollPosition = scrollPosition - cardWidth;
      $(".carousel-inner").animate({ scrollLeft: scrollPosition }, 800);
    }
  });
} else {
  $(multipleItemCarousel).addClass("slide");
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.

Recently added:

Website Landing Page using HTML CSS Bootstrap 5 #3

Website Landing Page using HTML CSS Bootstrap 5 #3

Simple Bootstrap 5 Card Design

Simple Bootstrap 5 Card Design

Bootstrap card design with hover effect

Bootstrap card design with hover effect

3.4 8 votes
Article Rating
Subscribe
Notify of
guest


0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

Similar Posts

Bootstrap carousel full width with captions in the center

Bootstrap carousel full width with captions in the center

Bootstrap Image Slider (with vertical text thumbnails)

Bootstrap Image Slider (with vertical text thumbnails)

Multiple Bootstrap Card Sliders On Same Page

Multiple Bootstrap Card Sliders On Same Page

Bootstrap 5 Testimonial Slider

Bootstrap 5 Testimonial Slider

Bootstrap 5 Carousel Multiple Items

Bootstrap 5 Carousel Multiple Items

Bootstrap Carousel Card Slider (CSS)

Bootstrap Carousel Card Slider (CSS)

Bootstrap Carousel with thumbnails

Bootstrap Carousel with thumbnails

Check Out Other Posts
0
Would love your thoughts, please comment.x
()
x
Buy Me A Coffee
Buy Me a Coffee