"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis odio ac eros sollicitudin consequat. Proin a tortor tortor. Nullam consequat dictum metus in vulputate. Pellentesque congue lectus justo, et."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis odio ac eros sollicitudin consequat. Proin a tortor tortor. Nullam consequat dictum metus in vulputate. Pellentesque congue lectus justo, et."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis odio ac eros sollicitudin consequat. Proin a tortor tortor. Nullam consequat dictum metus in vulputate. Pellentesque congue lectus justo, et."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis odio ac eros sollicitudin consequat. Proin a tortor tortor. Nullam consequat dictum metus in vulputate. Pellentesque congue lectus justo, et."
williamson
Web Developer
.owl-carousel{
padding-top: 60px;
}
.testimonial{
text-align: center;
}
.description{
color:#8a9aad;
font-size: 15px;
font-weight: 700;
line-height: 35px;
margin-bottom: 30px;
}
.pic{
position: relative;
}
.pic > img{
border-radius: 50%;
}
.pic:before{
content: "\f10d";
font-family: "Font Awesome 5 Free"; font-weight: 900;
display: inline-block;
position: absolute;
top:10px;
left:30%;
color:#eee;
font-size: 36px;
}
.pic:after{
content: "\f10d";
font-family: "Font Awesome 5 Free"; font-weight: 900;
display: inline-block;
position: absolute;
top:10px;
right: 30%;
color:#eee;
font-size: 36px;
}
.testimonial-title{
font-size: 13px;
color:#8a9aad;
text-transform: capitalize;
}
.testimonial-title > small{
display: block;
color:#8a9aad;
font-size: 10px;
text-transform: uppercase;
margin-top: 5px;
}
.owl-buttons{
position: absolute;
top:13%;
width: 100%;
}
.owl-prev{
position: absolute;
left:-14%;
}
.owl-next{
position: absolute;
right:-14%;
}
.owl-theme .owl-controls .owl-buttons div{
background: transparent;
opacity: 1;
}
.owl-theme .owl-controls .owl-buttons div{
border-radius: 50%;
}
.owl-prev:after,
.owl-next:after{
font-family: "Font Awesome 5 Free"; font-weight: 900;
content: "\f060";
width: 28px;
height: 28px;
font-size: 16px;
color:#dc005a;
transition: all 0.15s ease 0s;
}
.owl-next:after{
content: "\f061";
}
.owl-prev:hover:after,
.owl-next:hover:after{
color:#7a4b94;
}
.owl-pagination{
padding-top: 45px;
}
.owl-theme .owl-controls .owl-page span{
width: 9px;
height: 9px;
background: #c5c5c5;
border: 3px solid #c5c5c5;
margin-right: 20px;
opacity: 1;
transition: all 0.35s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
background: #fff;
border: 3px solid #90969d;
opacity: 1;
}
@media screen and (max-width: 767px){
.owl-buttons{
top:3%;
left: 43%;
width: 12%;
}
.pic:before{
left:10%;
}
.pic:after{
right: 10%;
}
}
@media screen and (max-width: 480px){
.owl-buttons{
top:3%;
left: 40%;
width: 18%;
}
.pic:before{
left:0;
}
.pic:after{
right: 0;
}
}
Testimonial slider depend on jQuery and Owl carousel.
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1199,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
pagination: true,
navigation:true,
navigationText:["",""],
autoPlay:false
});
});