testimonial style : demo 1

HTML

                    

                        

                            

                                

                                    

                                        

                                            

                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec ante orci. Mauris libero justo, tincidunt.
                                                

                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus elit pulvinar, lobortis libero a, venenatis massa. Mauris varius, nisi sit.
                                            
                                        
                                        

                                            
                                            

                                                kristiana
                                                Web Developer
                                            
                                        
                                    
                                
                            
                        
                    
                

CSS

                    
                    

                    .testimonial{
                        background: #fff;
                        padding: 45px;
                        text-align: left;
                    }
                    .testimonial > p{
                        font-size: 19px;
                        color:#93a0aa;
                        font-weight: 300;
                        line-height: 31px;
                    }
                    .testimonial-review{
                        text-align: center;
                        width: 300px;
                        margin: 20px auto;
                    }
                    .testimonial-review > img{
                        border-radius: 50%;
                        float: left;
                        margin-right: 15px;
                    }
                    .testimonial-title{
                        text-align: left;
                        padding-top: 15px;
                        line-height: 18px;
                        color:#000;
                        text-transform: capitalize;
                    }
                    .testimonial-title small{
                        display: block;
                        font-style: italic;
                        margin:10px 0;
                        color:#93a0aa;
                    }
                    .owl-buttons{
                        position: absolute;
                        top:45%;
                        width: 100%;
                        opacity: 0;
                    }
                    .owl-prev{
                        position: absolute;
                        left:-3%;
                    }
                    .owl-next{
                        position: absolute;
                        right:-3%;
                    }
                    .owl-theme .owl-controls .owl-buttons div{
                        background: #7a4b94;
                        opacity: 1;
                    }
                    .owl-theme .owl-controls .owl-buttons div{
                        border-radius: 50%;
                    }
                    .owl-prev:after,
                    .owl-next:after{
                        font-family: "Font Awesome 5 Free"; font-weight: 900;
                        content: "\f104";
                        width: 28px;
                        height: 28px;
                        font-size: 14px;
                    }
                    .owl-next:after{
                        content: "\f105";
                    }
                    .owl-theme .owl-controls .owl-page.active span,
                    .owl-theme .owl-controls.clickable .owl-page:hover span{
                        background:#dc005a;
                    }
                    .owl-carousel:hover .owl-buttons{
                        opacity: 1;
                    }
                    @media screen and (max-width: 767px){
                        .owl-prev{
                            left:-2.5%;
                        }
                        .owl-next{
                            right: -2.5%;
                        }
                    }
                

JavaScript

Testimonial slider depend on jQuery and Owl carousel.

                    
                    

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