
Testimonial page serves as a platform to show off how your customers say pleasant things about your business brand and how customers have benefited from your product or service, making it a powerful tool for establishing trust and encouraging potential customers to take action.
The Testimonial section is used to show off your customers experience in your website. I used the Bootstrap HTML, Javascript and CSS programming code to create the Testimonial example. I used HTML and Owl Carousel, CSS to design the Testimonial section and also used bootstrap class to make it responsive. It means it fully responsive so you can use any type of devices such as Mobile, Tab, Laptop and any big screen. So you can easily use Testimonial example in your company web page.
In this tutorial, I will going to explain step by step How to design a Testimonial Slider using HTML, Javascript, Owl Carousel and CSS. The snippet will allow you to display your customers Testimonials in your company websites. Full source codes and live Testimonial example link available at the end of this tutorial.
Add the below library in your html page in the header section.
1 2 3 4 |
<link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css</a>" rel="stylesheet"> <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" target="_blank" rel="noreferrer noopener">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css</a>"> <link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw> |
Add the below javascript library in footer section
1 2 3 4 5 |
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script> <script src="js/owl.carousel.min.js"></script> <script src="js/script.js"></script> |
The below code will design the single slide including the image and text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="testimonial-bg"> <div id="testimonial-slider" class="owl-carousel"> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> </div> </div> |
Repeat the above code for different customers. You can repeat the above code as per your requirements.
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 |
<div class="testimonial-bg"> <div id="testimonial-slider" class="owl-carousel"> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> </div> </div> |
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 |
$(document).ready(function(){ $('#testimonial-slider').owlCarousel({ loop:true, margin:10, responsiveClass:true, center:true, nav:true, autoplayTimeout:3000, autoplayHoverPause:true, autoplay:true, mouseDrag: true, navText:[ "<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>" ], responsive:{ 0:{ items:1, }, 600:{ items:1, }, 1000:{ items:1, } } }) }); |
I am used the below CSS to design the Testimonial section.
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 |
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap'); html { scroll-behavior: smooth; } body { font-family: 'Ubuntu', sans-serif; background: #fff; } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { background: rgb(242 187 9 / 30%) !important; color: inherit; border: none; padding: 0px 15px 5px 15px!important; font: inherit; color: #002b4b; padding: 10px; } .owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover { background: #f2bb09 !important; } .owl-carousel button.owl-dot { background: #f2bb09 !important; } .owl-dots .owl-dot { height: 10px; width: 10px; border-radius: 10px; background: #ccc !important; margin-left: 3px; margin-right: 3px; outline: none; } .owl-dots { text-align: center; } .owl-dots .owl-dot.active { background: #fff !important; } /* CSS Document */ .testimonial-bg { background: #002b4b; padding: 25px; } #testimonial-slider .testimonial .pic { width: 15%; padding: 20px 0; margin: 0 2% 0 7%; float: left; position: relative; z-index: 1; } #testimonial-slider .testimonial .pic:before, .testimonial .pic:after { content: ""; width: 100px; height: 100px; background: #f2bb09; position: absolute; z-index: -1; } #testimonial-slider .testimonial .pic:before { top: 10px; left: -10px; } #testimonial-slider .testimonial .pic:after { bottom: 10px; right: -10px; } #testimonial-slider .testimonial .pic img { width: 100%; height: auto; border: 3px solid #f2bb09; } #testimonial-slider .testimonial .testimonial-content { width: 75%; float: right; } #testimonial-slider .testimonial .title { display: block; font-size: 25px; font-weight: 600; color: #f2bb09; margin: 0; padding-top: 5px; padding-left: 15px; border: 0px !important; } #testimonial-slider .testimonial .post { display: block; font-size: 13px; font-weight: 400; line-height: 27px; color: #fff; text-transform: capitalize; margin-bottom: 25px; padding-left: 16px; } #testimonial-slider .testimonial .description { font-size: 15px; color: #fff; padding: 0 15px; margin: 0; position: relative; text-align: justify; } #testimonial-slider .testimonial .description:before, #testimonial-slider .testimonial .description:after { font-family: "FontAwesome"; font-weight: 900; font-size: 17px; color: #f2bb09; position: relative; } #testimonial-slider .testimonial .description:before { content: "\f10d"; margin-right: 5px; top: 0; left: 0; } #testimonial-slider .testimonial .description:after { content: "\f10e"; margin-left: 5px; position: relative; bottom: 0; right: 0; } #testimonial-slider .owl-theme .owl-controls { width: 70%; margin: 0; text-align: left; position: absolute; bottom: 0; right: 0; } #testimonial-slider .owl-theme .owl-controls .owl-buttons div { width: 70px; height: 90px; line-height: 90px; background: transparent; border-radius: 0; opacity: 1; position: relative; } @media only screen and (max-width: 990px) { #testimonial-slider .testimonial { text-align: center; } #testimonial-slider .testimonial .pic { width: 200px; margin: 0 auto; float: none; } #testimonial-slider .testimonial .pic:before, #testimonial-slider .testimonial .pic:after { width: 80px; height: 100px; } #testimonial-slider .testimonial .testimonial-content { width: 100%; float: none; } #testimonial-slider .testimonial .title { padding: 15px 0 0 0; } #testimonial-slider .testimonial .post { padding: 0; margin-bottom: 10px; } #testimonial-slider .owl-theme .owl-controls { width: 100%; position: static; text-align: center; } #testimonial-slider .owl-theme .owl-controls .owl-buttons div { height: 50px; line-height: 50px; } } .owl-nav .owl-next{ position: absolute; top:calc(50% - 25px); right: 0; opacity: 1; font-size: 30px !important; z-index: 1; } .owl-nav .owl-prev{ position: absolute; top:calc(50% - 25px); left: 0; opacity: 1; font-size: 30px !important; z-index: 1; } |
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Responsive Testimonials Example | Free Download</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <section id="slider" class="pt-5"> <div class="mission-area half-bg default-padding-bottom bg-gray "> <div class="container margin-40"> <div class="row margin-top-20 content-p table-d"> <div class="col-md-12"> <h3>Testimonials Example</h3> <div class="testimonial-bg"> <div id="testimonial-slider" class="owl-carousel"> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg" alt=""> </div> <div class="testimonial-content"> <h3 class="title">Lorem Ipsum</h3> <span class="post">Lorem ipsum dolor sit</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi. </p> </div> </div> </div> </div> </div> </div> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script> <script src="js/owl.carousel.min.js"></script> <script src="js/script.js"></script> </body> </html> <gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;"><gwmw style="display:none;"> |