Testimonial Carousel using Bootstrap

Hello and welcome. In this blog, we will create a bootstrap responsive testimonial carousel or slider with text animation. On this website, you will get more of this type of snippets. Navigate around the website if you want. For this project, I will recommend you to follow the below video tutorial. You will find many more videos like this on our YouTube channel. If you are interested in front-end development, you can subscribe to our YouTube channel.

I hope you have watched the video tutorial and understand the basic concept behind it. Bootstrap Carousel is commonly used as a homepage slider. But if we want, we can use Bootstrap to make an amazing and attractive testimonial slider. We do not have to work very hard for this. Using Bootstrap's Readymade Snippet, we get a nice testimonial slider. But what exactly is this testimonial slider? The answer is that when a customer buys a service or product, they give a review of that particular product or service. If that review is served in the form of a slider or carousel, then it is called a testimonial slider or carousel. This slider helps to prove the credibility of a company. If you buy online from home, at least once you've seen a company testimonial slider.

To create this snippet, we used the default carousel snippet from the Bootstrap website. We've put Carousel's img tag inside a div so that we can customize it as we need it. Then I put the necessary text in the carousel caption. You may have noticed that this slider has a text effect on each slide. We have given this effect through Animate CSS. You can try the animation classes of Animate CSS one by one when you download the project.

In the CSS Part, we first gave the project a specific background color and font. Then I brought the 'wrapper' class to the center of the viewport with a margin. The Bootstrap carousel has a gradient background color on both the right and left controls. We have given these two a transparent background to overcome that. Then I gave some basic CSS styles to the images and all the carousel-caption texts. We've tried to flatten the carousel's indicators a bit instead of round shapes.

You may like this:

Testimonial Carousel using Bootstrap [ Source Code ]:

To create the project, you need to create a CSS and an HTML file. Then you have to add a bootstrap CDN to this project. If you want, you can directly download the bootstrap CSS and JS files and add them to the project. For this project, we have used only CDN files. Then animated CSS CDN has been added for text animation. Finally, copy the code from the code box below, paste it into your project and save it. If you encounter problems with the code below, you can download the source code from the download button at the end.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Testimonial Carousel using bootstrap</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<div class="container">
			<div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
					<li data-slide-to="1" data-target="#carousel-example-generic"></li>
					<li data-slide-to="2" data-target="#carousel-example-generic"></li>
				</ol><!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<div class="imgBox animated bounceInRight" style="animation-delay: 1s"><img alt="" src="1.jpg"></div>
						<div class="carousel-caption animated bounceInLeft" style="animation-delay: 2s">
							<h3>Client's Name</h3>
							<h4>Their Designation</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae id rerum dolorum temporibus accusamus similique. Saepe cum omnis nisi praesentium voluptate doloremque magnam sequi.</p>
						</div>
					</div>
					<div class="item">
						<div class="imgBox animated bounceInRight" style="animation-delay: 1s"><img alt="" src="2.jpg"></div>
						<div class="carousel-caption animated bounceInLeft" style="animation-delay: 2s">
							<h3>Client's Name</h3>
							<h4>Their Designation</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae id rerum dolorum temporibus accusamus similique. Saepe cum omnis nisi praesentium voluptate doloremque magnam sequi.</p>
						</div>
					</div>
					<div class="item">
						<div class="imgBox animated bounceInRight" style="animation-delay: 1s"><img alt="" src="3.jpg"></div>
						<div class="carousel-caption animated bounceInLeft" style="animation-delay: 2s">
							<h3>Client's Name</h3>
							<h4>Their Designation</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae id rerum dolorum temporibus accusamus similique. Saepe cum omnis nisi praesentium voluptate doloremque magnam sequi.</p>
						</div>
					</div>
				</div><!-- Controls -->
				 <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
	</script>
</body>
</html>

ADD CSS:

body {
	font-family: 'Montserrat', sans-serif;
	background: #e3e9f7;
}
.wrapper {
	padding: 50px 0;
	position: relative;
	margin: 120px 0;
}
.carousel-control.left, .carousel-control.right {
	background: transparent;
}
.imgBox {
	width: 100px;
	height: 100px;
	margin: auto;
	border: 5px dashed #262626;
	border-radius: 50%;
	overflow: hidden;
}
.imgBox img {
	width: 100%;
}
.carousel-inner {
	background: aliceblue;
	padding: 35px;
	border-radius: 25px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
.carousel-caption {
	position: static;
	padding-bottom: 15px;
	padding-top: 0;
}
.carousel-caption h3 {
	font-size: 50px;
	margin-bottom: 15px;
	margin-top: 25px;
	font-family: 'Allura', cursive;
	color: #262626;
	text-shadow: none;
}
.carousel-caption h4 {
	color: #2b2626;
	text-shadow: none;
}
.carousel-caption p {
	font-size: 18px;
	margin: auto;
	width: 70%;
	margin-bottom: 10px;
	font-family: 'Teko', sans-serif;
	font-weight: 300;
	letter-spacing: 2px;
	text-shadow: none;
	color: #2b2626;
}
.carousel-indicators li {
	background-color: #ddd;
	width: 50px;
}
.carousel-control {
	color: #2b2626;
}
.carousel-indicators .active {
	background-color: #2b2626;
	width: 20px
}
.carousel-indicators {
	bottom: 10px;
}

I hope you have successfully implemented the code. If you want more such source code, you can follow us on our social media sites. In this blog, we provide regular front-end development-related snippets and codes. Thank you so much for being with us.

DOWNLOAD CODE

Post a Comment

Post a Comment

About Us

Contact Form

Testimonial Carousel using Bootstrap

You might like

Post a Comment

Post a Comment

Contact Form