<main>
<section>
<div class="testimonial">
<div class="container">
<div class="testimonial__inner">
<div class="testimonial-slider">
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus optio facilis beatae.</p>
</div>
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>MANAGER</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus optio facilis beatae.</p>
</div>
<div class="testimonial_box-name">
<h4>Anna Mull</h4>
</div>
<div class="testimonial_box-job">
<p>CEO</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus optio facilis beatae.</p>
</div>
<div class="testimonial_box-name">
<h4>Gail Forcewind</h4>
</div>
<div class="testimonial_box-job">
<p>Co-Founder</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus optio facilis beatae.</p>
</div>
<div class="testimonial_box-name">
<h4>Johanna smith</h4>
</div>
<div class="testimonial_box-job">
<p>SEO</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.testimonial{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #212529;
color: #212529;
&-slide{
padding:40px 20px;
}
&_box{
&-top{
background-color: #e9ecef;
padding: 30px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
box-shadow: 2px 2px 10px rgba(206, 212, 218, 0.534);
}
&-icon{
padding: 10px 0;
i{
font-size: 25px;
color: #212529;
}
}
&-text{
padding: 10px 0;
p{
color: #212529;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
}
&-name{
padding-top: 10px;
h4{
font-size: 20px;
line-height: 25px;
color: #212529;
margin-bottom: 0;
}
}
&-job{
p{
color: #212529;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 20px;
font-weight: 300;
margin-bottom: 0;
}
}
}
}
.slick-dots {
li{
padding: 0 30px;
opacity: 0.5;
button{
content:url(https://i.ibb.co/hKgs8gm/profile.jpg);
background: url(https://i.ibb.co/hKgs8gm/profile.jpg);
background-position: center !important;
background-size: cover !important;
text-indent: -9999px;
overflow:hidden;
width: 60px;
height: 60px;
border-radius: 50px;
border: 4px solid #dee2e6;
}
}
.slick-active{
opacity: 1;
}
}
View Compiled
$(document).ready(function() {
$('.testimonial-slider').slick({
autoplay: false,
autoplaySpeed: 1000,
speed: 600,
draggable: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
});
$('.slick-dots li:nth-child(1)').html('<button style="background: url(https://i.ibb.co/JQ18QKW/asd.jpg);"></button>');
$('.slick-dots li:nth-child(2)').html('<button style="background: url(https://i.ibb.co/hKgs8gm/profile.jpg);"></button>');
$('.slick-dots li:nth-child(3)').html('<button style="background: url(https://i.ibb.co/Q8zzbCR/profile1.jpg);"></button>');
$('.slick-dots li:nth-child(4)').html('<button style="background: url(https://i.ibb.co/tPFqymw/profile2.jpg);"></button>');
});
