"Testimonial"
Bootstrap 4.1.1 Snippet by mkverma541

<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>
@font-face { font-family: 'Cerebri Sans'; src: url('http://wpblogs.org/assets/fonts/Cerebri-Sans/Cerebri-Sans.woff') format('woff2'), url('http://wpblogs.org/assets/fonts/Cerebri-Sans/Cerebri-Sans.woff2') format('woff'); font-weight: 400; font-style: normal; } .s-testimonial .user-image img { max-width: 100px; height: auto; margin: auto; border-radius: 50%; margin-bottom: 30px; } .s-testimonial p { font-family: 'Cerebri Sans'; 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 }); });

Related: See More


Questions / Comments: