
Responsive Testimonial Slider is a very important section for any personal or corporate website. The main purpose of Testimonial Slider is to showcase what your client thinks about you, your products, and your company?. Basically, The Testimonial Carousel slider also shows the testimonial or feedback which is submitted by your customers or users.
The testimonial section is a kind of review section of your website where customers can share their feedback about your product or services.
So, today we will be going to make an automated Responsive Testimonial Slider section using only HTML, CSS, and JAVASCRIPT, and Bootstrap library.
Most of the company websites show Testimonials Slider on their home page for better customer attraction. When customers buy any services or products first they check reviews about the products and services, that’s why most of the companies should show the Testimonial Carousel slider on the home page.
So, Today I am sharing the Automated Responsive Testimonial Carousel slider. This is an
So, Today I am sharing the Automated Responsive Testimonial Carousel slider. This is an autoplay or automated Testimonial slider is based on Bootstrap and Jquery Library. I have used Bootstrap and JQuery library for creating a Testimonial Slider.
Automated Testimonial slider is based on Bootstrap and Jquery Library. I have used Bootstrap and JQuery library for creating a Testimonial Slider.
This section contains all the library files.
1 2 3 4 5 |
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="<a href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" target="_blank" rel="noreferrer noopener">https://pro.fontawesome.com/releases/v5.10.0/css/all.css</a>" /> |
The Footer section will contain all the Javascript library files.
1 2 3 4 5 6 7 8 9 |
<script src="js/jquery-3.4.1.min.js"></script> <!-- bootstrap --> <script src="js/bootstrap.min.js"></script> <!--Slick Carousel--> <script src="js/slick.min.js"></script> <!--Jquery UI--> <script src="js/jquery-ui.js"></script> <!-- main js --> <script src="js/main.js"></script> |
This section will contain all the HTML code. First, we will design the simple structure of the Testimonial Slider with the help of HTML. The HTML code is below.
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 |
<section class="testimonial-section default-style"> <div class="container-fluid"> <div class="row text-center"> <div class="col-lg-12"> <div class="common-title padding-bottom-30"> <h2 class="heading"> Testimonials</h2> </div> </div> <div class="testimonials-carousel"> <div class="testimonials-carousel-controller"> <span class="active-controller">01</span> <span class="controller-devided">/</span> <span class="total-controller">06</span> </div> <div class="testimonial-carousel-img"> <div class="carousel-items"><img src="img/carousel-1.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-2.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-3.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-4.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-5.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-6.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-7.png" alt="img"></div> </div> <div class="testimonial-content-wrap"> <!--Testimonial Description--> <div class="testimonial-carousel-content"> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Aaliya Reeza</h4> <h6 class="heading-6">Heart Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Jennifer J. Bordner</h4> <h6 class="heading-6">Dental Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Rhonda R. Tatum</h4> <h6 class="heading-6">Cardio Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Edna C. Sadler</h4> <h6 class="heading-6">Neurologie Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Whitney P. Cruse</h4> <h6 class="heading-6">Orthopedy Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Amber D. Ma</h4> <h6 class="heading-6">surgically Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Eva H. Magee</h4> <h6 class="heading-6">Cardiology Patient </h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> </div> <!--// Testimonial Description End--> <!--Testimonial Arrow--> <div class="testimonial-arrow"></div> </div> </div> </div> </div> </section> |
The CSS will help to provide the design of the Testimonial Slider.
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 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 |
:root { --main-color-one: #FF8686; --heading-color: #626262; --paragraph-color: #111111; --heading-color: #003367; --heading-font: 'Raleway', sans-serif; --body-font: 'Montserrat', sans-serif; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: var(--body-font); height: 100%; } * { -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; -moz-osx-font-smoothing: grayscale; /* Firefox */ -webkit-font-smoothing: antialiased; /* WebKit */ } body.modal-open { padding-right: 0 !important; } body { margin: 0; padding: 0; color: var(--paragraph-color); overflow-x: hidden; font-family: var(--body-font); height: 100%; } img{ width: 100%; } /*-------------------------------------- Testimonials Scss Start Here ----------------------------------------*/ .testimonial-section { background-color: #FFFFFF; } .testimonial-section .common-title .heading { text-transform: capitalize; margin: auto; } .testimonial-section.style-02 { background-image: -webkit-gradient(linear, left top, right top, from(rgba(227, 239, 244, 0.3)), to(rgba(130, 200, 206, 0.2))); background-image: -webkit-linear-gradient(left, rgba(227, 239, 244, 0.3), rgba(130, 200, 206, 0.2)); background-image: -o-linear-gradient(left, rgba(227, 239, 244, 0.3), rgba(130, 200, 206, 0.2)); background-image: linear-gradient(to right, rgba(227, 239, 244, 0.3), rgba(130, 200, 206, 0.2)); } .testimonial-section.style-02 .testimonials-carousel .testimonials-carousel-controller { position: absolute; left: 20%; top: 10%; width: 120px; } .testimonial-section.style-02 .testimonials-carousel .testimonials-carousel-controller .active-controller { position: absolute; left: -25px; top: -10px; color: #FF8686; } .testimonial-section.style-02 .testimonials-carousel .testimonials-carousel-controller .total-controller { position: absolute; right: -25px; top: -10px; color: #FF8686; } .testimonial-section.style-02 .testimonials-carousel .testimonials-carousel-controller .testimonial-progressbar { position: relative; z-index: 0; } .testimonial-section.style-02 .testimonials-carousel .testimonials-carousel-controller .testimonial-progressbar .progress-line { height: 1px; width: 100%; background-color: #FF8686; position: absolute; left: 0; } .testimonial-section.style-02 .testimonials-carousel .testimonials-carousel-controller .testimonial-progressbar .progress-active-line { position: absolute; z-index: 1; top: -1px; left: 0; width: 40px; height: 3px; background-color: #FF8686; } .testimonial-section.sergery-style { background-image: -webkit-gradient(linear, left top, right top, from(rgba(227, 233, 237, 0.3)), to(rgba(194, 229, 255, 0.4))); background-image: -webkit-linear-gradient(left, rgba(227, 233, 237, 0.3), rgba(194, 229, 255, 0.4)); background-image: -o-linear-gradient(left, rgba(227, 233, 237, 0.3), rgba(194, 229, 255, 0.4)); background-image: linear-gradient(to right, rgba(227, 233, 237, 0.3), rgba(194, 229, 255, 0.4)); } .testimonial-section.default-style .testimonials-carousel .testimonials-carousel-controller, .testimonial-section.sergery-style .testimonials-carousel .testimonials-carousel-controller { left: 25%; width: 200px; position: absolute; } .testimonial-section.default-style .testimonials-carousel .testimonials-carousel-controller .active-controller, .testimonial-section.default-style .testimonials-carousel .testimonials-carousel-controller .total-controller, .testimonial-section.sergery-style .testimonials-carousel .testimonials-carousel-controller .active-controller, .testimonial-section.sergery-style .testimonials-carousel .testimonials-carousel-controller .total-controller { color: #838282; font-size: 30px; line-height: 40px; } .testimonial-section.default-style .testimonials-carousel .testimonials-carousel-controller .active-controller, .testimonial-section.sergery-style .testimonials-carousel .testimonials-carousel-controller .active-controller { left: -45px; } .testimonial-section.default-style .testimonials-carousel .testimonials-carousel-controller .controller-devided, .testimonial-section.sergery-style .testimonials-carousel .testimonials-carousel-controller .controller-devided { font-size: 35px; top: -15px; } .testimonial-section .testimonials-carousel { width: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .testimonial-section .testimonials-carousel .testimonial-arrow { width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .testimonial-section .testimonials-carousel .testimonial-arrow.sky .slick-next:hover, .testimonial-section .testimonials-carousel .testimonial-arrow.sky .slick-prev:hover { background-color: #3EBCD8; } .testimonial-section .testimonials-carousel .testimonial-arrow .slick-next, .testimonial-section .testimonials-carousel .testimonial-arrow .slick-prev { color: #000000; background-color: #FFFFFF; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; text-align: center; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); cursor: pointer; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .testimonial-section .testimonials-carousel .testimonial-arrow .slick-next:hover, .testimonial-section .testimonials-carousel .testimonial-arrow .slick-prev:hover { color: #FFFFFF; background-color: #FF8686; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); } .testimonial-section .testimonials-carousel .testimonial-arrow .slick-next { margin-left: 20px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .testimonial-section .testimonials-carousel .testimonial-carousel-img { width: 55%; } .testimonial-section .testimonials-carousel .testimonial-carousel-img .slick-arrow { position: absolute; bottom: 30%; z-index: 9; } .testimonial-section .testimonials-carousel .testimonial-carousel-img .right_active_item .carousel-items { height: 565px !important; margin-top: 35px !important; } .testimonial-section .testimonials-carousel .testimonial-carousel-img .carousel-items { height: 420px; margin-top: 180px; border-radius: 20px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; width: 95% !important; overflow: hidden; } .testimonial-section .testimonials-carousel .testimonial-carousel-img .carousel-items img { border-radius: 20px; -o-object-fit: fill; object-fit: fill; margin: auto; } .testimonial-section .testimonials-carousel .testimonial-content-wrap { width: 40%; margin-left: 5%; position: absolute; top: 52%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .testimonial-section .testimonials-carousel .testimonial-content-wrap .carousel-items .content { width: 50%; } .testimonial-section .testimonials-carousel .testimonial-content-wrap .carousel-items .content .heading-4 { font-weight: 600; font-size: 24px; line-height: 32px; color: var(heading-color); } .testimonial-section .testimonials-carousel .testimonial-content-wrap .carousel-items .content .heading-6 { font-size: 16px; line-height: 26px; color: #8596A7; font-weight: 600; } @media (max-width: 1850px) { .testimonial-section .testimonials-carousel .testimonial-carousel-img .right_active_item .carousel-items { height: 540px !important; margin-top: 60px !important; } } @media (max-width: 1750px) { .testimonial-section .testimonials-carousel .testimonial-carousel-img .right_active_item .carousel-items { height: 520px !important; margin-top: 80px !important; } } @media (max-width: 1700px) { .testimonial-section .testimonials-carousel .testimonial-carousel-img .right_active_item .carousel-items { height: 505px !important; margin-top: 95px !important; } } @media (max-width: 1650px) { .testimonial-section .testimonials-carousel .testimonial-carousel-img .right_active_item .carousel-items { height: 485px !important; margin-top: 115px !important; } } @media (max-width: 1600px) { .testimonial-section .testimonials-carousel .testimonial-carousel-img .right_active_item .carousel-items { height: 500px !important; margin-top: 100px !important; } } @media only screen and (min-width: 1200px) and (max-width: 1600px) { .testimonial-section .testimonials-carousel .testimonial-carousel-img .carousel-items img { height: 100%; } } @media (max-width: 1200px) { .testimonial-section .testimonials-carousel .testimonial-content-wrap { top: 45%; } .testimonial-section .testimonials-carousel .testimonial-carousel-img .carousel-items { height: 570px !important; margin-top: 30px !important; } } |
This section contains the Js code. This section will help you to provide the animation on the Testimonial Carousel Slider.
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 |
(function($){ "use strict"; $(document).ready(function(){ /*----------------------------------- Testimonials Slick Slider -------------------------------------*/ var testimonialCarouselImg = $('.testimonial-carousel-img'); var testimonialCarouselContent = $('.testimonial-carousel-content'); if(testimonialCarouselImg.length > 0){ testimonialCarouselImg.slick({ autoplay: true, draggable: true, speed: 400, slidesToShow: 5, slidesToScroll: 1, dots: false, arrows: true, responsive: [ { breakpoint: 1201, settings: { slidesToShow: 3, slidesToScroll: 1, } }, { breakpoint: 600, settings: { slidesToShow: 3, slidesToScroll: 1 } }, { breakpoint: 485, settings: { slidesToShow: 2, slidesToScroll: 1 } } ], asNavFor: testimonialCarouselContent, appendArrows: $('.testimonial-arrow'), prevArrow: '<div class="slick-next"><i class="fas fa-chevron-right"></i></div>', nextArrow: '<div class="slick-prev"><i class="fas fa-chevron-left"></i></div>', }); // On before slide change testimonialCarouselImg.on('beforeChange', function(event, slick, currentSlide, nextSlide){ var testSlider = testimonialCarouselImg.slick('getSlick'); var totalSlide = testSlider.$slides.length; var currentSliderIndex = nextSlide; ++currentSliderIndex; var progress = 100 / totalSlide; var progressWidth = progress * currentSliderIndex; testProgressbarStart(progressWidth) $('.testimonials-carousel-controller .total-controller').text(check_number(totalSlide)); $('.testimonials-carousel-controller .active-controller').text(check_number(currentSliderIndex)); if(nextSlide > 0){ var customActive = nextSlide + 4; testimonialCarouselImg.find('.slick-slide').removeClass('right_active_item'); testimonialCarouselImg.find('.slick-slide[data-slick-index="'+customActive+'"]').addClass('right_active_item'); }else{ testimonialCarouselImg.find('.slick-slide').removeClass('right_active_item'); testimonialCarouselImg.find('.slick-slide[data-slick-index="4"]').addClass('right_active_item'); } }); } if(testimonialCarouselContent.length > 0){ testimonialCarouselContent.slick({ dots: false, infinite: true, speed: 400, slidesToShow: 1, slidesToScroll: 1, autoplay: false, arrows:false, asNavFor: $(testimonialCarouselImg), }); } }); function check_number(num) { var IsInteger = /^[0-9]+$/.test(num); return IsInteger ? '0' + num : null; } function testProgressbarStart(progressWidth){ $('.testimonials-carousel-controller .testimonial-progressbar').css({'width': progressWidth+'%'}); } })(jQuery); |
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" /> </head> <body> <!--Testimonials Section Start Here--> <section class="testimonial-section default-style"> <div class="container-fluid"> <div class="row text-center"> <div class="col-lg-12"> <div class="common-title padding-bottom-30"> <h2 class="heading"> Testimonials</h2> </div> </div> <div class="testimonials-carousel"> <div class="testimonials-carousel-controller"> <span class="active-controller">01</span> <span class="controller-devided">/</span> <span class="total-controller">06</span> </div> <div class="testimonial-carousel-img"> <div class="carousel-items"><img src="img/carousel-1.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-2.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-3.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-4.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-5.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-6.png" alt="img"></div> <div class="carousel-items"><img src="img/carousel-7.png" alt="img"></div> </div> <div class="testimonial-content-wrap"> <!--Testimonial Description--> <div class="testimonial-carousel-content"> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Aaliya Reeza</h4> <h6 class="heading-6">Heart Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Jennifer J. Bordner</h4> <h6 class="heading-6">Dental Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Rhonda R. Tatum</h4> <h6 class="heading-6">Cardio Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Edna C. Sadler</h4> <h6 class="heading-6">Neurologie Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Whitney P. Cruse</h4> <h6 class="heading-6">Orthopedy Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Amber D. Ma</h4> <h6 class="heading-6">surgically Patient</h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> <div class="carousel-items"> <div class="content"> <h4 class="heading-4">Eva H. Magee</h4> <h6 class="heading-6">Cardiology Patient </h6> <div class="padding-top-20 padding-bottom-30"> <p> “Lorem ipsum dolor sit amet, ad vix fuisset assentior. Vim dicit lobortis molestiae no, maiorum postulant has ex. dicam singulis qualisque ut, delicata qualisque ei eum.”</p> </div> </div> </div> </div> <!--// Testimonial Description End--> <!--Testimonial Arrow--> <div class="testimonial-arrow"></div> </div> </div> </div> </div> </section> <!--Testimonials Section End Here--> <!--Jquery--> <script src="js/jquery-3.4.1.min.js"></script> <!-- bootstrap --> <script src="js/bootstrap.min.js"></script> <!--Slick Carousel--> <script src="js/slick.min.js"></script> <!--Jquery UI--> <script src="js/jquery-ui.js"></script> <!-- main js --> <script src="js/main.js"></script> </body> </html> <gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"></gwmw><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw><gwmw style="display:none;"> |
Hope This article will help you to learn How To Make Responsive Testimonial Slider using HTML, CSS, Javascript and Bootstarp Library.