Testimonial carousel bootstrap 4 with owl carousel

Hello Visitors, today in this blog, you will learn to create a responsive testimonial card slider using bootstrap four and owl carousel two. Previously, I have shared some snippets based on CSS animation examples, bootstrap, JavaScript, etc. Please make sure to check those. For better understanding, please follow the video tutorial below.

I hope you watched the video. Now, what is a testimonial slider? The testimonial slider displays the various reviews or testimonial text given by the consumers. For displaying those reviews, developers use a specific carousel named a testimonial slider or the customer review slider. In this snippet, I have used the bootstrap framework and owl carousel jquery plugin. The Owl carousel is a touch-enabled plugin that lets you create a nice responsive carousel slider.

You May Also Like:

In this testimonial slider snippet, I have put the reviewer image on the left side and the text content on the right side. The thumbnail is created in a rounded shape using the CSS border-radius property. The quote is on the right side with inverted commas followed by name and designation text. I used Allura google font to make the name of the reviewer look like a digital sign. I set the autoplay: true in the owl carousel initiating script, which means the carousel will slide automatically. You can also drag the slider elements to move to the following slides as well. In the owl carousel plugin, we can set how many items will be on the different viewports. So apart from the small devices, I set two items, for all other viewport devices. Without further explanation, I am providing the code below.

Responsive Testimonial Carousel [ Source Code ]:

To make this snippet, you have to create two files. one is HTML with .html extension and the other one is CSS with .css extension. link the CSS file in HTML. Link the related fonts of your choice from the google fonts website. After that, link the bootstrap, jQuery, and owl carousel CDN. Please copy the code below and paste it into the related files and save it.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->	
<head>
	<meta charset="UTF-8">
	<title>Responsive Testimonial Carousel using Bootstrap & Owl Carousel 2</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<section class="testimonial">
		<div class="container">
			<div class="row">
				<div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
					<div class="sec-heading text-center">
						<h6>" Client's Says "</h6>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="clients-carousel owl-carousel">
					<div class="single-box">
						<div class="img-area"><img alt="" class="img-fluid" src="https://images.pexels.com/photos/3525908/pexels-photo-3525908.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
						<div class="content">
							<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, doloribus minima praesentium laborum ea earum."</p>
							<h4>Jason Doe</h4>
							<h6>Designation Here</h6>
						</div>
					</div>
					<div class="single-box">
						<div class="img-area"><img alt="" class="img-fluid" src="https://images.pexels.com/photos/5042302/pexels-photo-5042302.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
						<div class="content">
							<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, doloribus minima praesentium laborum ea earum."</p>
							<h4>Dave Wood</h4>
							<h6>Designation Here</h6>
						</div>
					</div>
					<div class="single-box">
						<div class="img-area"><img alt="" class="img-fluid" src="https://images.pexels.com/photos/3211476/pexels-photo-3211476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
						<div class="content">
							<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, doloribus minima praesentium laborum ea earum."</p>
							<h4>Matt Demon</h4>
							<h6>Designation Here</h6>
						</div>
					</div>
					<div class="single-box">
						<div class="img-area"><img alt="" class="img-fluid" src="https://images.pexels.com/photos/1270076/pexels-photo-1270076.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
						<div class="content">
							<span class="rating-star"><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i><i class="icofont-star"></i></span>
							<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, doloribus minima praesentium laborum ea earum."</p>
							<h4>jimmy kimmel</h4>
							<h6>Designation Here</h6>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js">
	</script> 
	<script>
	       $('.clients-carousel').owlCarousel({
	           loop: true,
	           nav: false,
	           autoplay: true,
	           autoplayTimeout: 5000,
	           animateOut: 'fadeOut',
	           animateIn: 'fadeIn',
	           smartSpeed: 450,
	           margin: 30,
	           responsive: {
	               0: {
	                   items: 1
	               },
	               768: {
	                   items: 2
	               },
	               991: {
	                   items: 2
	               },
	               1200: {
	                   items: 2
	               },
	               1920: {
	                   items: 2
	               }
	           }
	       });
	</script>
</body>
</html>

ADD CSS:

body {
	font-family: 'Montserrat', sans-serif;
	background-color: #f6f3ea;
}
.testimonial {
	padding: 80px 0;
}
.sec-heading {
	margin-bottom: 60px;
}
.sec-heading h6 {
	font-family: allura;
	font-weight: 900;
	font-size: 80px;
}
.single-box {
	border: 3px solid #e6f0fa;
	padding: 50px 30px 40px;
	border-radius: 20px;
	background: #fff;
}
.img-area {
	margin: 45px 0 20px;
}
.single-box img {
	max-width: 100px;
	border-radius: 50%;
	margin: 0 auto
}
.single-box h4 {
	font-weight: 600;
	margin: 0;
	font-family: 'Allura', cursive;
	font-size: 35px;
}
.single-box {
	overflow: hidden
}
.single-box .img-area {
	width: 30%;
	float: left;
	margin: 0
}
.single-box .content {
	width: 70%;
	float: left;
	padding-left: 10px
}
.single-box p {
	margin: 10px 0 25px;
	line-height: 2.3;
}
.testi-carousel-three .single-box {
	border: 0;
	padding: 0 50px;
}
.testi-carousel .owl-dots, .clients-carousel .owl-dots, .testi-carousel-three .owl-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -60px;
	text-align: center;
	width: 100%;
}
.testi-carousel .owl-dot, .clients-carousel .owl-dot, .testi-carousel-three .owl-dot {
	width: 16px;
	height: 16px;
	background-color: #ddd;
	display: inline-block;
	margin: 0 6px;
	text-align: center;
	border-radius: 50%;
}
.testi-carousel .owl-dot.active, .clients-carousel .owl-dot.active, .testi-carousel-three .owl-dot.active {
	background-color: blueviolet;
}
@media only screen and (min-width: 360px) and (max-width: 479px) {
	.testimonial {
		padding: 70px 0 130px;
	}
}
@media only screen and (min-width: 320px) and (max-width: 359px) {
	.testimonial {
		padding: 70px 0 130px;
	}
	.single-box {
		padding: 50px 0 40px;
	}
	.single-box .img-area {
		width: 100%;
		float: none;
	}
	.single-box .content {
		width: 100%;
		float: none;
	}
}

I hope you have created your version of the snippet. Please make sure to subscribe 'divinector' youtube channel. Please click the notification bell icon so that when we publish any new video, you will notification. Also please follow our social media profiles to stay connected with this blog. Thank you for visiting the blog.

Post a Comment

Post a Comment

About Us

Contact Form

Testimonial carousel bootstrap 4 with owl carousel

You might like

Post a Comment

Post a Comment

Contact Form