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

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>

<h2 class="heading"> Testimonials</h2>

</div>

</div>

<h4 class="heading-4">Aaliya Reeza</h4>

<h6 class="heading-6">Heart Patient</h6>

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

<h4 class="heading-4">Jennifer J. Bordner</h4>

<h6 class="heading-6">Dental Patient</h6>

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

<h4 class="heading-4">Rhonda R. Tatum</h4>

<h6 class="heading-6">Cardio Patient</h6>

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

<h4 class="heading-4">Edna C. Sadler</h4>

<h6 class="heading-6">Neurologie Patient</h6>

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

<h4 class="heading-4">Whitney P. Cruse</h4>

<h6 class="heading-6">Orthopedy Patient</h6>

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

<h4 class="heading-4">Amber D. Ma</h4>

<h6 class="heading-6">surgically Patient</h6>

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

<h4 class="heading-4">Eva H. Magee</h4>

<h6 class="heading-6">Cardiology Patient </h6>

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

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

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;

}

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

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

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>

</head>

<body>

<h2 class="heading"> Testimonials</h2>

</div>

</div>

<h4 class="heading-4">Aaliya Reeza</h4>

<h6 class="heading-6">Heart Patient</h6>

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

<h4 class="heading-4">Jennifer J. Bordner</h4>

<h6 class="heading-6">Dental Patient</h6>

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

<h4 class="heading-4">Rhonda R. Tatum</h4>

<h6 class="heading-6">Cardio Patient</h6>

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

<h4 class="heading-4">Edna C. Sadler</h4>

<h6 class="heading-6">Neurologie Patient</h6>

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

<h4 class="heading-4">Whitney P. Cruse</h4>

<h6 class="heading-6">Orthopedy Patient</h6>

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

<h4 class="heading-4">Amber D. Ma</h4>

<h6 class="heading-6">surgically Patient</h6>

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

<h4 class="heading-4">Eva H. Magee</h4>

<h6 class="heading-6">Cardiology Patient </h6>

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

</section>

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