How To Make Responsive Testimonial Slider

How To Make Responsive Testimonial Slider On Website Using HTML, CSS, JavaScript and Bootstrap Library

Table of Contents

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.

How To Make Responsive Testimonial Slider On Website Using HTML, CSS, 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.

Read Also:

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.

Header Section

This section contains all the library files.

<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" />

Footer Section

The Footer section will contain all the Javascript library files.

<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>

HTML Code

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.

<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>

CSS Code

The CSS will help to provide the design of the Testimonial Slider.

: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;
  }
}

JavaScript Code

This section contains the Js code. This section will help you to provide the animation on the Testimonial Carousel Slider.


(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);

Final HTML Code

<!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>

Conclusion

Hope This article will help you to learn How To Make Responsive Testimonial Slider using HTML, CSS, Javascript and Bootstarp Library.

Download Full Source Code for Responsive Testimonial Slider

Responsive Testimonial Slider

1 file(s) 1.81MB

Download

Live Demo

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

December 7, 2022

HTMLCSS

Review Page Design in HTML5 Download

Know Details

December 4, 2022

HTMLCSS

Product Grid in HTML5

Know Details

jQuery Carousel Slider With Accordion Style Transitions

June 6, 2022

HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details

Testimonials HTML Template Free Download

January 15, 2022

HTMLCSS

Testimonials HTML Template Free Download

Know Details

Bootstrap Table with Pagination and Search

January 9, 2022

HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

How To Make Responsive Testimonial Slider