How To Use Owl Carousel For Testimonial
CSS Link -
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/
ajax/libs/OwlCarousel2/2.1.3/
assets/owl.carousel.min.css">
JQUERY or JAVASCRIPT Code -
<script src="https://cdnjs.cloudflare.com/
ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/
ajax/libs/OwlCarousel2/2.1.3/
owl.carousel.min.js"></script>
<script>
$('#testimonialSlider').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
</script>
Html Code -
<section class="testimonial">
<div class="containers">
<div class="owl-carousel" id="testimonialSlider">
<div class="item">
<div class="testimonial-image">
<img src="./images/testimonial/m1.png" alt="Testimonial">
</div>
<div class="testimonial-content text-center">
<h2>Aidan</h2>
<h3>Designer</h3>
<p>
At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum deleniti
atque corrupti quos dolores et quas molestias excepturi
sint occaecati cupiditate non provident, similique sunt in
</p>
</div>
</div>
<div class="item">
<div class="testimonial-image">
<img src="./images/testimonial/m2.png" alt="Testimonial">
</div>
<div class="testimonial-content text-center">
<h2>Johny Walker</h2>
<h3>Designer</h3>
<p>
At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum deleniti
atque corrupti quos dolores et quas molestias excepturi
sint occaecati cupiditate non provident, similique sunt in
</p>
</div>
</div>
<div class="item">
<div class="testimonial-image">
<img src="./images/testimonial/m3.png" alt="Testimonial">
</div>
<div class="testimonial-content text-center">
<h2>Barry Allen</h2>
<h3>Designer</h3>
<p>
At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum deleniti
atque corrupti quos dolores et quas molestias excepturi
sint occaecati cupiditate non provident, similique sunt in
</p>
</div>
</div>
</div>
</div>
</section>
Css Code -
.testimonial{
background-image: url(../images/testimonial/bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 20px 0;
position: relative;
}
.testimonial-image{
width: 110px;
height: 110px;
margin: 0 auto;
}
.testimonial-image img{
border-radius: 50%;
border: 5px rgba(255,255,255,.1) solid;
width: 100%;
height: 100%;
}
.testimonial-content h2{
font-size: 16px;
color: #ff4000;
font-weight: 600;
text-transform: uppercase;
margin: 9px 0 .5rem;
line-height: 1.2;
}
.testimonial-content h3{
font-size: 15px;
color: #fff;
line-height: 16px;
margin: 8px 0 10px;
letter-spacing: 0.4px;
}
.testimonial-content p{
text-align: center;
position: relative;
margin: 28px 30% 70px 30%;
font-style: italic;
font-size: 14px;
color: #ccc;
line-height: 23px;
position: relative;
}
.testimonial-content p::before{
content: "\f10d";
font-family: FontAwesome;
position: absolute;
left: -15%;
top: -50px;
font-size: 42px;
color: rgba(255,255,255,.1);
}
.testimonial-content p::after{
content: "\f10e";
font-family: FontAwesome;
position: absolute;
right: -15%;
bottom: 0;
font-size: 42px;
color: rgba(255,255,255,.1);
}
.testimonial .owl-dots{
position: absolute;
bottom: 10px;
left: 50%;
}
.testimonial .owl-dot{
background: #111;
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
margin: 0 6px;
transition: all .3s ease;
}
.testimonial .owl-dot:hover{
background: #fff;
}
.testimonial .owl-dot.active{
background: #fff;
height: 12px;
width: 12px;
}
.testimonial .owl-next{
position: absolute;
top: 50%;
right: 48px;
transform: translate(-50%, -50%);
background: #ffffff24;
width: 64px;
height: 64px;
border-radius: 50%;
z-index: 2;
font-size: 24px;
color: #111;
transition: all .3s ease;
}
.testimonial .owl-prev{
position: absolute;
top: 50%;
left: 113px;
transform: translate(-50%, -50%);
background: #ffffff24;
width: 64px;
height: 64px;
border-radius: 50%;
z-index: 2;
font-size: 24px;
color: #111;
transition: all .3s ease;
}
.testimonial .owl-next i, .testimonial .owl-prev i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.testimonial .owl-prev:hover, .testimonial .owl-next:hover{
background: #ff4000;
color: #fff;
}
YouTube -