testimonial style : demo 46

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div id="testimonial-slider" class="owl-carousel">
                <div class="testimonial">
                    <div class="pic">
                        <img src="images/img-1.jpg" alt="">
                    </div>
                    <h3 class="testimonial-title">
                        Williamson<small>, Web Developer</small>
                    </h3>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam enim diam, tempus vel ultricies viverra, luctus in elit. Aliquam tempus blandit velit, in pharetra ex volutpat a. Cras eu augue ac nisl tempor commodo.
                    </p>
                </div>
 
                <div class="testimonial">
                    <div class="pic">
                        <img src="images/img-2.jpg" alt="">
                    </div>
                    <h3 class="testimonial-title">
                        kristiana<small>, Web Designer</small>
                    </h3>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam enim diam, tempus vel ultricies viverra, luctus in elit. Aliquam tempus blandit velit, in pharetra ex volutpat a. Cras eu augue ac nisl tempor commodo.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.css">
 
.testimonial{
    text-align: center;
}
.testimonial .pic{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 15px;
}
.testimonial .pic img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.testimonial .testimonial-title{
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    color: #0c4767;
    margin: 0 0 70px 0;
}
.testimonial .testimonial-title small{
    font-size: 15px;
    font-weight: 600;
    color: #787878;
}
.testimonial .description{
    font-size: 14px;
    color: #787878;
    line-height: 27px;
    position: relative;
    margin: 0;
}
.testimonial .description:before{
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: 46%;
    font-size: 20px;
    color: #fa7921;
    line-height:33px;
    border: 2px solid #fa7921;
}
.owl-theme .owl-controls .owl-page span{
    background: #fff;
    border: 2px solid #0c4767;
    opacity: 1;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page:hover span{
    border: 2px solid #fa7921;
}

JavaScript

(Testimonial depend on jQuery and Owl carousel.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
 
$(document).ready(function(){
    $("#testimonial-slider").owlCarousel({
        items:1,
        itemsDesktop:[1000,1],
        itemsDesktopSmall:[979,1],
        itemsTablet:[768,1],
        pagination:true,
        navigation:false,
        navigationText:["",""],
        slideSpeed:1000,
        singleItem:true,
        transitionStyle:"fade",
        autoPlay:true
    });
});
License Terms