"Testimonial Slider"
Bootstrap 3.3.0 Snippet by monsterstudios

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" /> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <section class="testimonials"> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <h3>Recent Winners</h3> <ul id="testimonial-slider"> <li> <p> <i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i class="fa fa-quote-right"></i> </p> <h4>Winining Ticket: 0901012</h4> <h4>Amount Won: N10,000,000</h4> <img src="//placehold.it/100x100" class="img-responsive img-circle"> </li> <li> <p> <i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i class="fa fa-quote-right"></i> </p> <h4>Winining Ticket: 0901012</h4> <h4>Amount Won: N10,000,000</h4> <img src="//placehold.it/100x100" class="img-responsive img-circle"> </li> <li> <p> <i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i class="fa fa-quote-right"></i> </p> <h4>Winining Number: 0901012</h4> <h4>Amount Won: N10,000,000</h4> <img src="//placehold.it/100x100" class="img-responsive img-circle"> </li> </ul> </div> </div> </div> </section>
.testimonials h3{ text-transform: uppercase; margin-bottom: 50px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; } .testimonials ul{ padding: 0; margin: 0; list-style: none; text-align: center; } .testimonials ul li > p{ margin-bottom: 30px; } .testimonials ul li > p i{ padding: 10px; } .testimonials ul li img{ width: 80px; margin: 20px auto; } .testimonials ul h4{ font-size: 14px; text-transform: capitalize; }
$("#testimonial-slider").slick({ infinite: false, slidesToShow: 1, dots: true });

Related: See More


Questions / Comments: