"Testimonial Slider CSS RME"
Bootstrap 4.1.1 Snippet by rudisims

<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 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-12"> <h3><strong>Testimonias</strong></h3> <div id="carousel-example-generic32" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic32" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic32" data-slide-to="1"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item carousel-item active"> <div class="row" style="padding: 20px"> <div class="col-sm-8"> <div class="row"> <div class="col-sm-1"> <i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i> </div> <div class="col-sm-11"> <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> </div> </div> <div class="col-sm-4"> <div class="row"> <div class="col-sm-4"> <img src="http://demos1.showcasedemos.in/jntuicem2017/html/v1/assets/images/jack.jpg" class="img-responsive" style="width: 80px"> </div> <div class="col-sm-8"> <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> <div class="item carousel-item"> <div class="row" style="padding: 20px"> <div class="col-sm-8"> <div class="row"> <div class="col-sm-1"> <i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i> </div> <div class="col-sm-11"> <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> </div> </div> <div class="col-sm-4"> <div class="row"> <div class="col-sm-4"> <img src="http://demos1.showcasedemos.in/jntuicem2017/html/v1/assets/images/kiara.jpg" class="img-responsive" style="width: 80px"> </div> <div class="col-sm-8"> <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> <!--<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; } .carousel-inner img{ border-radius: 50% } .carousel-indicators { text-align: right; float: right; right: 2% !important; left: inherit; } .carousel .carousel-indicators li { background-color: rgba(70, 70, 70, 0.25); width: 10px; height: 10px; border-radius: 50%; } .carousel .carousel-indicators .active { background-color: #fa4639; }
/*no js required*/

Related: See More


Questions / Comments: