Bootstrap 5 Testimonial Carousel Slider

byCodingFlicks -March 19, 2023

0

If a website provides a service, business, or product then it must have a testimonial slider. The testimonial slider is a useful element commonly used to display customer testimonials on websites and marketing materials. This slider consists of multiple slides or panels that display quotes or quotes from satisfied customers. It usually presents the customer's name, photo, and other relevant pieces of information related to services they have got. Today we will share with you one such testimonial slider snippet. You can get an idea of what the slider will look like from the video demo below. We have many projects on this website with CSS animation, full website design, javascript examples, etc. You can find them by clicking on the Load More button at the bottom of our homepage.

Video Demo:

Hope you got an idea of what the snippet will look like by watching the video demo. Building trust with customers is very important in any business. A testimonial slider does just that. It connects real-world feedback from happy customers that reassures future customers. It can be an effective tool to increase conversions and improve customer trust. Apart from the elements mentioned above, some testimonial sliders include star ratings, customer logos, videos, etc. In our snippet, we added the client image on the left and the review, the client's name, and surname on the right. We used the Bootstrap 5 framework to build the snippet. Bootstrap 5 is the latest version of Bootstrap Framework. With this framework, we can create an interface or a website using only a few classes and minimal CSS.

You May Also Like:

Bootstrap 5 Testimonial Slider [ Source Code ]:

First, create an HTML and a CSS file. Also, add Bootstrap 5 CSS and js CDN. Copy the code from the code box below and paste them into your project files. Save it and open it in your browser to see if it works. If it doesn't work then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Testimonial Slider</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <div class="d-flex align-items-center py-5 mh-100">    
        <a class="carousel-control-prev text-decoration-none " href="#mycarousel" role="button" data-bs-slide="prev">
            <div class="d-flex flex-column justify-content-center me-2 ms-auto left">Prev<span class="fas fa-arrow-left"></span> </div> <span class="sr-only">Previous</span>
        </a>
        <div class="container">
            <div id="mycarousel" class="carousel slide" data-bs-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-bs-target="#mycarousel" data-bs-slide-to="0" class="active"></li>
                    <li data-bs-target="#mycarousel" data-bs-slide-to="1"></li>
                    <li data-bs-target="#mycarousel" data-bs-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="img-area">
                                    <img src="img/1.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="d-flex flex-column justify-content-center my-5 px-3 img-text">
                                    <p class="review">"We have received the best service from this person. We will definitely hire for our next project."</p>
                                    <div class="person">
                                        <p class="m-0">Jason Walker</p>
                                    </div>
                                    <p class="designation">Graphics Designer</p>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="img-area">
                                    <img src="img/2.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class=" d-flex flex-column justify-content-center my-5 px-3 img-text">
                                    <p class="review">"We have received the best service from this person. We will definitely hire for our next project."</p>
                                    <div class="person">
                                        <p class="m-0">Mike Jones</p>
                                    </div>
                                    <p class="designation">Human Resource Manager</p>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-lg-5 ">
                                <div class="img-area">
                                    <img src="img/3.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class=" d-flex flex-column justify-content-center my-5 px-3 img-text">
                                    <p class="review">"We have received the best service from this person. We will definitely hire for our next project."</p>
                                    <div class="person">
                                        <p class="m-0">Stephen Jones</p>
                                    </div>
                                    <p class="designation">Web Developer</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="carousel-control-next text-decoration-none " href="#mycarousel" role="button" data-bs-slide="next">
            <div class="d-flex flex-column justify-content-center right ms-2 me-auto"> Next <span class="fas fa-arrow-right"></span> </div> <span class="sr-only">Next</span>
        </a>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ADD CSS:

img{
    width: 100%;
    height: 100%;
}
body{
    background-color: deepskyblue;
    position: relative;
    margin:20px 30px ;
    font-family: montserrat;
}
.container {
	max-width: 800px;
	background-color: white;
	padding: 0;
	border-radius: 25px;
	box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.img-area {
	width: 200px;
	height: 200px;
	margin: 20% auto;
	border-radius: 50%;
	overflow: hidden;
	border: 10px ridge #101010;
}
.review {
	font-size: 20px;
	font-weight: 600;
	padding: 30px 0;
}
.person{
    font-size: 18px;
    color: #101010;
    margin: 0;
}
.designation{
    color: #101010;
    font-size: 14px;
}
.carousel-inner{
    max-width: 800px;
}
.carousel-indicators {
	bottom: -40px;
	right: 0;
	margin: 0;
}

.carousel-indicators [data-bs-target ] {
    height: 15px;
    border: 2px solid #fff;
    width: 15px;
    background-color: inherit;
    border-radius: 50%;
}
.carousel-indicators .active{
    border: 2px solid transparent;
    background-color:#fff;
}
.left {
	color: #fff;
	font-weight: 900;
}
.right{
    color: #fff;
    font-weight: 900;
}
.carousel-control-next, .carousel-control-prev {
    position: relative;

}
@media (max-width:560px) {
    .img-area{
        margin: 5% auto 0;
    }
    .img-text{
        text-align: center;
    }
    .review{
        font-size: 14px;
        font-weight: 600;
        margin: 5px 0;
    }
    .person{
        font-size: 13px;
    }
    .designation{
        font-size: 10px;
    }
    .right{
        font-size: 12px;
    }
    .left{
        font-size: 12px;
    }
    .carousel-indicators [data-bs-target ] {
        height: 8px;
        border: 1px solid #fff;
        width: 8px;
        background-color: inherit;
        border-radius: 50%;
    }
    .carousel-indicators .active{
        border: 1px solid transparent;
        background-color:#fff;
    }
}

Hope the code is working properly. If you like our website content then share them with like-minded people. Thank you very much for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.