"testimonial carousel in owl carousel"
Bootstrap 4.1.1 Snippet by webcoderskull

Post to Facebook Tweet this

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
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<section class="testimonial-section">
<div class="container">
<div class="row text-center pb-5">
<div class="col-12">
<div class="h2">Testimonial</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="https://images.pexels.com/photos/704955/pexels-photo-704955.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada vulputate nisi in fermentum. Vivamus ac libero quis nisi auctor pulvinar. Aenean sit amet lectus posuere, mattis massa eget, ullamcorper diam. Nunc sit amet felis eget arcu congue dictum.
</p>
<h3 class="title">Jessica</h3>
<small class="post">- Archietect</small>
</div>
<div class="testimonial">
<div class="pic">
<img src="https://images.pexels.com/photos/638700/pexels-photo-638700.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada vulputate nisi in fermentum. Vivamus ac libero quis nisi auctor pulvinar. Aenean sit amet lectus posuere, mattis massa eget, ullamcorper diam. Nunc sit amet felis eget arcu congue dictum.
</p>
<h3 class="title">Pearl</h3>
<small class="post">- Engineer </small>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.testimonial{
border-right: 4px solid #2A3D7D;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
padding: 30px 30px 30px 130px;
margin: 0 15px 30px 15px;
overflow: hidden;
position: relative;
}
.testimonial:before{
content: "";
position: absolute;
bottom: -4px;
left: -17px;
border-top: 25px solid #29D18B;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(45deg);
}
.testimonial:after{
content: "";
position: absolute;
top: -4px;
left: -17px;
border-top: 25px solid #29D18B;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(135deg);
}
.testimonial .pic{
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: 60px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[990,2],
itemsTablet:[768,1],
// pagination:true,
// navigation:false,
// navigationText:["",""],
autoplay:false,
autoplayTimeout:1000,
autoplayHoverPause:false,
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard PRO React
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: