Bootstrap 5 Testimonial Carousel Slider

Uncategorized / Leave a Comment

Bootstrap 5 testimonial carousel slider. By using the responsive slider we can showcase our customer’s or client’s reviews and can attract users to our services or projects.

HTML

<section class="testimonial-slider bg-light">
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner py-5 text-center">
            <div class="carousel-item active">
                <i class="bi bi-chat-right-quote fs-1 text-danger"></i>                    
                <figure class="text-cent col-md-6 offset-md-3 mt-4">
                    <blockquote class="blockquote">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
                    </blockquote>
                    <figcaption class="blockquote-footer mt-2">Jonh Son</figcaption>
                </figure>
            </div>
            <div class="carousel-item">
                <i class="bi bi-chat-right-quote fs-1 text-danger"></i>
                <figure class="col-md-6 offset-md-3 mt-4">
                    <blockquote class="blockquote">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
                    </blockquote>
                    <figcaption class="blockquote-footer mt-2">Jonh Son</figcaption>
                </figure>
            </div>
            <div class="carousel-item">
                <i class="bi bi-chat-right-quote fs-1 text-danger"></i>
                <figure class="col-md-6 offset-md-3 mt-4">
                    <blockquote class="blockquote">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
                    </blockquote>
                    <figcaption class="blockquote-footer mt-2">Jonh Son</figcaption>
                </figure>
            </div>
        </div>
    </div>
</section>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

CSS

.testimonial-slider .carousel-indicators button {
    width: 10px;
    height: 10px;
    background-color: #dc3545;
    border-radius: 100%;
}
.testimonial-slider {
    padding: 10px 0px 40px;
}

Must Read