Hey friends, today in this blog you’ll learn How To CreateTestimonial Slider Using HTML CSS JavaScript . We’ll use HTML CSS & JS to create this awesome Testimonial Slider . Earlier I’ve shared a blog on How To Create Responsive Login Form Using Html Css Only .
This Testimonial Slider are fully responsive for all devices. I have also created a full video tutorial of this Testimonial Slider Using HTML CSS JavaScript , you can also watch a video tutorial. I Hope this tutorial will be helpful.
Video Tutorial of Testimonial Slider Using HTML CSS JavaScript
You might like this:
- Responsive Ecommerce Website
- Responsive Image Slider
- How to Create Resume CV Website Using HTML CSS Bootstrap4
- How create an Online Store Website Using Htm Css JS | Multi Page Website
Testimonial Slider [Source Codes]
To create this Testimonial Slider . First, you need to create Three files, HTML File , CSS File and JS File . After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Testimonial Slider Using HTML CSS JavaScript from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<section class="testim" id="testim">
<div class="wrap">
<span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
<span id="left-arrow" class="arrow left fa fa-chevron-left"></span>
<ul class="dots" id="testim-dots">
<li class="dot active"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
<div class="cont" id="testim-content">
<div class="active">
<div class="img"><img src="p1.jpg"></div>
<h2>Lorem N. Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quasi aliquid vel voluptatum
deleniti! Corrupti velit, porro facere facilis laboriosam accusantium, eos beatae maiores.</p>
</div>
<div>
<div class="img"><img src="p2.jpg"></div>
<h2>Lorem L. Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quasi aliquid vel voluptatum
deleniti! Corrupti velit, porro facere facilis laboriosam accusantium, eos beatae maiores.</p>
</div>
<div>
<div class="img"><img src="p3.jpg"></div>
<h2>Lorem R. Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quasi aliquid vel voluptatum
deleniti! Corrupti velit, porro facere facilis laboriosam accusantium, eos beatae maiores.</p>
</div>
<div>
<div class="img"><img src="p4.jpg"></div>
<h2>Lorem P. Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quasi aliquid vel voluptatum
deleniti! Corrupti velit, porro facere facilis laboriosam accusantium, eos beatae maiores.</p>
</div>
<div>
<div class="img"><img src="p5.jpg"></div>
<h2>Lorem Q. Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quasi aliquid vel voluptatum
deleniti! Corrupti velit, porro facere facilis laboriosam accusantium, eos beatae maiores.</p>
</div>
</div>
</div>
</section>
# CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
*,
*:after,
*:before{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
cursor: default;
}
html{
width: 100%;
height: auto;
}
body{
width: 100%;
height: auto;
font-size: 16px;
font-weight: 300;
font-family: 'Roboto',sans-serif;
background: rgba(30,30,30);
}
.testim{
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.testim .wrap{
position: relative;
width: 100%;
max-width: 1020px;
padding: 40px 20px;
margin: auto;
}
.testim .arrow{
display: block;
position: absolute;
color: #eee;
cursor: pointer;
font-size: 2em;
top: 50%;
transform: translateY(-50%);
transition: all .3s ease-in-out;
padding: 5px;
z-index: 22222222;
}
.testim .arrow:before{
cursor: pointer;
}
.testim .arrow.left{
left: 10px;
}
.testim .arrow.right{
right: 10px;
}
.testim .arrow:hover{
color: #ea830e;
}
.testim .dots{
text-align: center;
position: absolute;
width: 100%;
bottom: 60px;
left: 0;
display: block;
z-index: 3333;
height: 12px;
}
.testim .dots .dot{
list-style-type: none;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #eee;
margin: 0 10px;
cursor: pointer;
transition: all .5s ease-in-out;
position: relative;
}
.testim .dots .dot.active,
.testim .dots .dot:hover{
background: #ea830e;
border-color: #ea830e;
}
.testim .dots .dot.active{
animation: testim-scale .5s ease-in-out forwards;
}
.testim .cont{
position: relative;
overflow: hidden;
}
.testim .cont > div{
text-align: center;
position: absolute;
top: 0;
left: 0;
padding: 0 0 70px 0;
opacity: 0;
}
.testim .cont > div.inactive{
opacity: 1;
}
.testim .cont > div.active{
position: relative;
opacity: 1;
}
.testim .cont div .img img{
display: block;
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
}
.testim .cont div h2{
color: #ea830e;
font-size: 1em;
margin: 15px 0;
}
.testim .cont div p{
font-size: 1.15em;
color: #eee;
width: 80%;
margin: auto;
}
.testim .cont div.active .img img{
animation: testim-show .5s ease-in-out forwards;
}
.testim .cont div.active h2{
animation: testim-content-in .4s ease-in-out forwards;
}
.testim .cont div.active p {
animation: testim-content-in .5s ease-in-out forwards;
}
.testim .cont div.inactive .img img{
animation: testim-hide .5s ease-in-out forwards;
}
.testim .cont div.inactive h2{
animation: testim-content-out .4s ease-in-out forwards;
}
.testim .cont div.inactive p {
animation: testim-content-out .5s ease-in-out forwards;
}
@keyframes testim-scale {
0% {
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@keyframes testim-content-in {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes testim-content-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
@keyframes testim-show {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes testim-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}
/* coding with nick */
/* Responsive */
@media all and (max-width: 300px) {
body {
font-size: 14px;
}
}
@media all and (max-width: 500px) {
.testim .arrow{
font-size: 1.5rem;
}
.testim .cont div p{
line-height: 25px;
}
}
# JS CODE
Last, create a JavaScript file( script.js ) and paste the given codes in your JavaScript file.
// coding with nick
// vars
'use strict'
var testim = document.getElementById("testim"),
testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
testimleftArrow = document.getElementById("left-arrow"),
testimRightArrow = document.getElementById("right-arrow"),
testimSpeed = 4500,
currentSlide = 0,
currentActive = 0,
testimTimer
;
// coding with nick
window.onload = function () {
// Testim Script
function playSlide(slide) {
for (var k = 0; k < testimDots.length; k++) {
testimContent[k].classList.remove("active");
testimContent[k].classList.remove("inactive");
testimDots[k].classList.remove("active");
}
if (slide < 0) {
slide = currentSlide = testimContent.length - 1;
}
if (slide > testimContent.length - 1) {
slide = currentSlide = 0;
}
if (currentActive != currentSlide) {
testimContent[currentActive].classList.add("inactive");
}
testimContent[slide].classList.add("active");
testimDots[slide].classList.add("active");
currentActive = currentSlide;
clearTimeout(testimTimer);
testimTimer = setTimeout(function () {
playSlide(currentSlide += 1);
}, testimSpeed)
}
// coding with nick
testimleftArrow.addEventListener("click", function () {
playSlide(currentSlide -= 1);
})
testimRightArrow.addEventListener("click", function () {
playSlide(currentSlide += 1);
})
for (var l = 0; l < testimDots.length; l++) {
testimDots[l].addEventListener("click", function () {
playSlide(currentSlide = testimDots.indexOf(this));
})
}
playSlide(currentSlide);
}
// coding with nick
That’s all, now you’ve successfully Create a Testimonial Slider Using HTML CSS JavaScript . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button.
I Hope this blog will be helpful.
Read More –
