testimonial style : demo 10

HTML

                    

CSS

                    
                    

                    .testimonial{
                        padding: 20px 15px 50px;
                    }
                    .testimonial .description{
                        background: #e6e6e6;
                        border-radius: 6px;
                        color: #333333;
                        font-size: 14px;
                        font-style: italic;
                        padding: 45px 35px;
                        position: relative;
                    }
                    .testimonial .description:before{
                        content: "\f10d";
                        font-family: "Font Awesome 5 Free"; font-weight: 900;
                        position: absolute;
                        top:-17px;
                        font-size: 30px;
                        color:#2c97de;
                    }
                    .testimonial .description:after{
                        content: "";
                        width: 27px;
                        position: absolute;
                        bottom: -12px;
                        border-top: 13px solid #ececec;
                        border-left: 13px solid transparent;
                        border-right: 13px solid transparent;
                    }
                    .testimonial-review{
                        padding-top: 32px;
                    }
                    .testimonial-review img{
                        border-radius: 50%;
                        float: left;
                        margin-left: 25px;
                        margin-right: 20px;
                    }
                    .testimonial-review .testimonial-title{
                        color: #333;
                        font-size: 16px;
                        font-weight: 600;
                        margin-top: 15px;
                        float: left;
                        text-transform: capitalize;
                    }
                    .testimonial-title small{
                        display: block;
                        color: #999;
                        font-size: 12px;
                        margin-top: 3px;
                    }
                    .testimonial .rating{
                        padding: 0;
                        list-style: none;
                        text-align: right;
                    }
                    .rating li{
                        display: inline-block;
                        color:#2c97de;
                    }
                    .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{
                        background: #2c97de;
                    }
                    .owl-theme .owl-controls .owl-page span{
                        background: #333;
                        opacity: 1;
                    }
                    @media only screen and (max-width: 480px) {
                        .testimonial-review img{
                            margin-left: 15px;
                            margin-right: 10px;
                        }
                    }
                

JavaScript

Testimonial slider depend on jQuery and Owl carousel.

                    
                    

                    $(document).ready(function(){
                        $("#testimonial-slider").owlCarousel({
                            items:2,
                            itemsDesktop:[1000,2],
                            itemsDesktopSmall:[979,2],
                            itemsTablet:[768,1],
                            pagination: true,
                            autoPlay:true
                        });
                    });