HTML code
This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 3.3.4 included, to get the result that you can see in the preview selection
Download<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g==" crossorigin="anonymous"></script>
<section class="testimonial">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="title">
<h2>Testimonials</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit.</p>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div id="testimonial" class="slick-slider slick-dotted" role="toolbar">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" role="listbox">
<div
class="testimonial_single slick-slide"
data-slick-index="0"
aria-hidden="true"
tabindex="-1"
role="option"
aria-describedby="slick-slide00">
<div class="member-img">
<img
src="https://bootdey.com/img/Content/avatar/avatar1.png"
alt="member img"
class="img-fluid wow zoomIn"
data-wow-duration="2s"
data-wow-delay=".2s"/>
</div>
<h4 class="wow fadeIn" data-wow-duration="2s" data-wow-delay=".2s">Devid Martin</h4>
<span class="wow fadeIn" data-wow-duration="2s" data-wow-delay=".3s">Guardian</span>
<p class="wow fadeIn" data-wow-duration="2s" data-wow-delay=".4s">
I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great
explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself
</p>
</div>
<div
class="testimonial_single slick-slide"
data-slick-index="1"
aria-hidden="true"
tabindex="-1"
role="option"
aria-describedby="slick-slide01">
<div class="member-img">
<img
src="https://bootdey.com/img/Content/avatar/avatar1.png"
alt="member img"
class="img-fluid wow zoomIn"
data-wow-duration="2s"
data-wow-delay=".2s"/>
</div>
<h4>Nilpori Nilanjona</h4>
<span>Guardian</span>
<p>
I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great
explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself
</p>
</div>
<div
class="testimonial_single slick-slide slick-current slick-active"
data-slick-index="2"
aria-hidden="false"
tabindex="-1"
role="option"
aria-describedby="slick-slide02">
<div class="member-img">
<img
src="https://bootdey.com/img/Content/avatar/avatar1.png"
alt="member img"
class="img-fluid wow zoomIn"
data-wow-duration="2s"
data-wow-delay=".2s"/>
</div>
<h4>Jhon Deo</h4>
<span>Guardian</span>
<p>
I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great
explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS code
This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 3.3.4 included, to get the result that you can see in the preview selection
Downloadbody {
margin-top: 20px;
}
.testimonial {
padding: 150px 0 0px 0;
background: #00b5ec;
position: relative;
}
.testimonial:before {
content: "";
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 623px;
width: 100%;
z-index: 0;
}
.testimonial:after {
color: rgba(255, 255, 255, 0.1);
position: absolute;
font-weight: 600;
font-family: "Flaticon";
content: "\f10c";
left: 70%;
top: 37%;
font-size: 234px;
z-index: 0;
transform: translate(-50%);
}
.testimonial .title {
margin-bottom: 60px;
max-width: 500px;
margin: 0px auto;
text-align: center;
}
.testimonial .title h2 {
color: #ffffff;
margin-bottom: 12px;
font-size: 35.5px;
}
.testimonial .title p {
color: #ffffff;
margin: 0;
font-weight: 600;
font-size: 17.7px;
}
.testimonial .testimonial_single {
background: #ffffff;
text-align: center;
position: relative;
margin: 170px 90px 0;
padding: 100px 95px 130px;
z-index: 2;
}
.testimonial .testimonial_single:before {
background: #ffffff;
content: "";
height: 140%;
position: absolute;
top: 60px;
left: 50%;
width: 108%;
z-index: -113;
opacity: 0.5;
transform: translateX(-50%);
}
.testimonial .testimonial_single:after {
background: #ffffff;
content: "";
height: 140%;
position: absolute;
top: 120px;
left: 50%;
width: 116%;
z-index: -113;
opacity: 0.2;
transform: translateX(-50%);
}
.testimonial .testimonial_single .member-img {
position: absolute;
top: -130px;
left: 50%;
height: 190px;
width: 190px;
transform: translateX(-50%);
}
.testimonial .testimonial_single .member-img img {
border-radius: 50%;
height: 100%;
width: auto;
box-shadow: 9px 16px 46px 0px rgba(47, 47, 47, 0.2);
}
.testimonial .testimonial_single h4 {
font-size: 18px;
color: #ff1949;
font-weight: 700;
}
.testimonial .testimonial_single span {
font-weight: 400;
font-size: 18px;
color: #2f2f2f;
line-height: 40px;
}
.testimonial .testimonial_single p {
font-weight: 300;
font-size: 18px;
line-height: 30px;
margin: 25px 0 0;
color: #2f2f2f;
}
.testimonial .owl-theme .owl-controls {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
}
.testimonial .owl-theme .owl-controls .owl-page span {
background: #2f2f2f;
}
.testimonial .owl-theme .owl-controls .owl-page.active span {
background: transparent;
}
.testimonial .slick-list {
margin: 0;
}
.testimonial ul.slick-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: rotate(-90deg) translateX(-50%);
}
.testimonial ul.slick-dots li .pager_item {
height: 10px;
width: 10px;
background: #2f2f2f;
margin: 15px 0;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.testimonial ul.slick-dots .slick-active .pager_item {
height: 17px;
width: 17px;
background: transparent;
margin: 15px -4px;
border: 4px solid #ff1949;
}
Javascript/Jquery code
This is the javascript code used to create this bootstrap snippet, You can copy and paste the following javascript code inside a page with bootstrap 3.3.4 included, to get the result that you can see in the preview selection
Download$(function () {
$("#testimonial").slick({
slidesToShow: 1,
slidesToScroll:1,
dots: true,
arrows: false,
infinite: true,
speed: 1,
fade: true,
cssEase: "linear",
customPaging: function (slider, i) {
return '<div class="pager_item" id=' + i + "></div>";
},
});
});
About this bootstrap example/template
This example/template, slick testimonial, was published on Aug 7th 2020, 07:52 by Bootdey Admin and it is free.
We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.
We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.
This code example currectly have 456 views, Using this bootstrap snippet you have the following benefits:
Bootstrap 3.3.4
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
This code example is based on bootstrap 3.3.4 and the grid system of this framework
Responsive
Based on bootstrap framework makes all the layouts perfectly responsive for all devices
Crossbrowser compatibility
Tested on all major browsers, it works smoothly on all of them
Jquery plugins
Great built-in plugins with jquery framework, you can easy to change all declarations
semantic html 5
Built on html / css3 the code quality is really amazing
Simple Integration
This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working