<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<section id="s-testimonial" class="pad-80-sep">
<div class="container">
<div class="row">
<div class="col-lg-12 s-testimonial">
<div class="item">
<div class="user-image">
<img src="http://wpblogs.org/wp-content/uploads/2018/08/22.jpg" class="img-fluid">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<h2>Ms. Lorem R. Ipsum</h2>
<div class="designation">Poppies, Founder</div>
</div>
</div>
<div class="item">
<div class="user-image">
<img src="http://wpblogs.org/wp-content/uploads/2018/08/22.jpg" class="img-fluid">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<h2>Ms. Lorem R. Ipsum</h2>
<div class="designation">Poppies, Founder</div>
</div>
</div>
<div class="item">
<div class="user-image">
<img src="http://wpblogs.org/wp-content/uploads/2018/08/22.jpg" class="img-fluid">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<h2>Ms. Lorem R. Ipsum</h2>
<div class="designation">Poppies, Founder</div>
</div>
</div>
<div class="item">
<div class="user-image">
<img src="http://wpblogs.org/wp-content/uploads/2018/08/22.jpg" class="img-fluid">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<h2>Ms. Lorem R. Ipsum</h2>
<div class="designation">Poppies, Founder</div>
</div>
</div>
<div class="item">
<div class="user-image">
<img src="http://wpblogs.org/wp-content/uploads/2018/08/22.jpg" class="img-fluid">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<h2>Ms. Lorem R. Ipsum</h2>
<div class="designation">Poppies, Founder</div>
</div>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap');
.s-testimonial .user-image img {
max-width: 100px;
height: auto;
margin: auto;
border-radius: 50%;
margin-bottom: 30px;
}
.s-testimonial p {
font-family: 'Montserrat Alternates', sans-serif;
text-align: center;
font-size: 15px;
line-height: 1.8;
}
.s-testimonial h2 {
color: #ea830e;
font-size: 1em;
margin: 15px 0;
text-align: center;
}
.s-testimonial .item {
margin: 0 10px;
background-color: #f4f4f4;
border-radius: 5px;
padding: 40px 20px;
outline: none;
}
.s-testimonial .designation {
text-align: center;
font-style: italic;
}
.s-testimonial .slick-dots {
bottom: -60px;
}
$(document).ready(function(){
$('.s-testimonial').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
arrows: false,
draggable: true,
fade: false,
touchMove: true
});
});
