"Testimonial Slider CSS"
Bootstrap 4.1.1 Snippet by Pawan Pandey

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <script src="https://use.fontawesome.com/5a8a7bb461.js"></script> <div class="container"> <div class="row"> <div class="col-sm-6"> <h3><strong>Testimonial</strong></h3> <div class="seprator"></div> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row" style="padding: 20px"> <button style="border: none;"><i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i></button> <p class="testimonial_para">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo en.</p><br> <div class="row"> <div class="col-sm-2"> <img src="http://demos1.showcasedemos.in/jntuicem2017/html/v1/assets/images/jack.jpg" class="img-responsive" style="width: 80px"> </div> <div class="col-sm-10"> <h4><strong>Jack Andreson</strong></h4> <p class="testimonial_subtitle"><span>Chlinical Chemistry Technologist</span><br> <span>Officeal All Star Cafe</span> </p> </div> </div> </div> </div> <div class="item"> <div class="row" style="padding: 20px"> <button style="border: none;"><i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i></button> <p class="testimonial_para">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo en.</p><br> <div class="row"> <div class="col-sm-2"> <img src="http://demos1.showcasedemos.in/jntuicem2017/html/v1/assets/images/kiara.jpg" class="img-responsive" style="width: 80px"> </div> <div class="col-sm-10"> <h4><strong>Kiara Andreson</strong></h4> <p class="testimonial_subtitle"><span>Chlinical Chemistry Technologist</span><br> <span>Officeal All Star Cafe</span> </p> </div> </div> </div> </div> </div> </div> <div class="controls testimonial_control pull-right"> <a class="left fa fa-chevron-left btn btn-default testimonial_btn" href="#carousel-example-generic" data-slide="prev"></a> <a class="right fa fa-chevron-right btn btn-default testimonial_btn" href="#carousel-example-generic" data-slide="next"></a> </div> </div> </div> </div>
*{ font-family: 'Poppins', sans-serif; } .testimonial_subtitle{ color: #0aaa7a; font-size: 12px; } .testimonial_btn{ background-color: #373d4b !important; color: #fff !important; } .seprator { height: 2px; width: 56px; background-color: #0aaa7a; margin: 7px 0 10px 0; }

Related: See More


Questions / Comments:

I like this a lot. It's clean, well-styled and functions smoothly. I like that it auto starts and plays and I like that it pauses on hover. There's just one problem. I can't get it working. :(

I cannot seem to get this working. The styling is intact and it looks good, but there's no behavior. Not only does it not auto-start, I can't even cycle through the testimonials using the arrows. Other than a basic HTML skeleton (which I've made), what am I missing?

CreativeVM () - 5 years ago - Reply 0