"Testimonials slider"
Bootstrap 4.1.1 Snippet by SwanandPalve

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="//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 ---------->
<!-- testimonials starts -->
<section class="pt-5" id="testimonial-section">
<h2 class="text-center mb-5"><span>Happy Responses from our Customers</span></h2>
<div class="clearfix pb-3"></div>
<div id="testimonials" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#testimonials" data-slide-to="0" class="active"></li>
<li data-target="#testimonials" data-slide-to="1"></li>
<li data-target="#testimonials" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="testi-text-wrap">
<h2 class="testi-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet ut urna ut consectetur. Suspendisse sit amet nisl nec purus luctus malesuada. </h2>
</div>
<div class="testi-footer">
<div class="testi-ftr-wrap">
<img src="https://www.iconexperience.com/_img/i_collection_png/128x128/plain/quotation_mark.png" class="rounded quoteicon" alt="Quote" />
<img src="http://chittagongit.com//images/avatar-png-icon/avatar-png-icon-5.jpg" class="rounded custimg" alt="user image" />
<div class="cust-pro-info"><span class="cust_name">Name</span>
<span class="cust_pro">@Name</span></div>
</div>
</div>
</div>
<div class="carousel-item">
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
#testimonials .carousel-indicators li{width: 20px; height: 20px; border: 2px solid #000; background-color: #000000; border-radius: 3px;}
#testimonials .carousel-indicators li.active{background-color: #fff;}
#testimonials .carousel-inner {padding: 0px 0px 50px 0px; background-color: orangered;}
#testimonials .carousel-item{margin-top: 50px;}
#testimonials .testi-text {width: 50%;float: right;color: #fff;font-family: robotoregular;font-size: 30px;margin-right: 10%;}
#testimonials .testi-footer {width: 100%;position: relative;background-color: #212121;height: 120px;clear: both;margin: 25px auto;float: left;}
#testimonials .testi-footer img {vertical-align: middle;display: inline-block;}
#testimonials .testi-footer .quoteicon {width: 50px;height: auto;margin: 35px 70px;}
#testimonials .testi-footer .custimg {width: 250px;height: auto;/*position: absolute; bottom: -10px;*/ margin-top: -120px;}
.testi-ftr-wrap {max-width: 1240px;margin-left: auto;margin-right: auto;}
.cust-pro-info {float: right;color: #fff;width: 50%;margin-right: 10%;padding-top: 10px;}
.cust-pro-info span.cust_name {font-size: 35px;text-transform: uppercase;font-family: robotomedium;}
.cust-pro-info span.cust_pro {font-size: 25px;font-family: robotoregular;}
.cust-pro-info span {clear: both;float: left;}
.testi-text-wrap {max-width: 1240px;margin-left: auto;margin-right: auto;}
@media (max-width:992px){
#testimonials .testi-text {width: 90%;font-size: 20px; margin-right: 5%; }
#testimonials .testi-footer{height: auto; padding: 10px;}
#testimonials .testi-footer .quoteicon { width: 20px;height: auto; margin: 0px; float: left; }
#testimonials .testi-footer .custimg { width: 60px;height: auto; margin: 0px; float: left; }
.cust-pro-info span.cust_name{font-size: 15px;}
.cust-pro-info span.cust_pro{font-size: 13px;}
.blog .carousel-indicators{bottom: 0px;}
.cust-pro-info { float: left;color: #fff;width: auto;margin-right: 0;padding-top: 10px; margin-left: 15px;}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: