"Testimonial Slider CSS"
Bootstrap 3.0.0 Snippet by shivamgeraa1

<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; }
/*no js required*/

Related: See More


Questions / Comments:

Hi

Thank you for free code

Is it possible to change transition speed of the testimonials? If so, how?

Adam

ajassat (-1) - 4 years ago - Reply -1


Hello, thank you for the code!

Is it possible to make the animation not auto? I want only to let the user change to the other slide, or to make it slower the animation if possible.

Thank you!

dkaneloglou (-1) - 5 years ago - Reply -1


Yes we can do that as well by using bootstrap itself. I'll update the code soon. check later.

shivamgeraa1 (-2) - 4 years ago - Reply -2