Owl Carousel Testimonial

Membuat slider testimonial dengan menggunakan plugin owl carousel

by Miftah Faroq

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="wrapper">
		<div class="testimonial-carousel section-padding owl-carousel">
			<div class="single-testi">
				<div class="img-area">
					<img src="https://source.unsplash.com/daily">
				</div>
				<div class="img-text">
					<h2>John Doe</h2>
					<h3>Software Designer</h3>
					<p>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
					</p>
					<hr>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
			</div>
			<div class="single-testi">
				<div class="img-area">
					<img src="https://source.unsplash.com/daily">
				</div>
				<div class="img-text">
					<h2>John Doe</h2>
					<h3>Software Designer</h3>
					<p>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
					</p>
					<hr>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
			</div>
			<div class="single-testi">
				<div class="img-area">
					<img src="https://source.unsplash.com/daily">
				</div>
				<div class="img-text">
					<h2>John Doe</h2>
					<h3>Software Designer</h3>
					<p>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas fa-star"></i>
						<i class="fas...

CSS

body{
	background-color: #009fdc;
	font-family: poppins;
}

.wrapper{
	width: 1170px;
	margin: 0 auto;
}

.section-padding{
	padding: 60px 0;
}

.testimonial-carousel{
	margin: 5% auto 0;
}

.img-area{
	width: 100px;
	height: 100px;
	display: block;
	overflow: hidden;
	border-radius: 50%;
	margin: 0 auto;
	background-color: red;
}

.img-area img{
	height: 100px;
	width: 100px;
}


.single-testi{
	background: #ffffff;
	padding: 10%;
	text-align: center;
	border-radius: 100px 0 100px 0;
}

.img-text h2{
	text-transform: uppercase;
	margin: 20px 0 -15px;
}

.img-text i{
	color: #ff5257;
}

hr{
	color: #ff5257;
}

.owl-dots{
	text-align: center;
}

button.owl-dot{
	display: inline-block;
	height: 15px !important;
	width: 15px !important;
	background: #fff;
	opacity: 0.8;
	border-radius: 50%;
	margin: 50px 5px 0;
}

.owl-carousel button.owl-dot{
	background-color: #fff;
}

.owl-dot.active{
	background-color: #ff5257 !important;
}

@media only screen and (min-width: 375px) and (max-width: 767px){
	.wrapper{
		width: 100%;
	}
}

JavaScript

$('.testimonial-carousel').owlCarousel({
		    loop:true,
		    margin:20,
		    autoplay:true,
		    responsive:{
		        0:{
		            items:1
		        },
		        600:{
		            items:2
		        },
		        1000:{
		            items:3
		        }
		    }
		})