Create Testimonial Slider Using HTML and CSS With Codepen
Hello Coders! Welcome to the Codewithrandom blog. In this blog, We learn how to Create a Testimonial Slider Using HTML, CSS, and JavaScript With Codepen. There is a profile photo, name, and testimonial on every Testimonial Slide.
There will be a review part with numerous customer testimonials about that coffee from various sources, as we can see on the coffee shop’s website. To demonstrate to the customer how excellent the goods are, testimonials are added to the website. Getting the client’s trust is the primary objective.
50+ HTML, CSS & JavaScript Projects With Source Code
I hope you enjoy our blog so let’s start with a basic html structure for a Testimonial Slider.
| Code by | feyinway |
| Project Download | Link Available Below |
| Language used | HTML ,CSS and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
HTML Code For Testimonial Slider:-
<body>
<section id="testim" class="testim">
<!-- <div class="testim-cover"> -->
<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 id="testim-dots" class="dots">
<li class="dot active"></li>
<!-- -->
<li class="dot"></li>
<!-- -->
<li class="dot"></li>
<!-- -->
<li class="dot"></li>
<!-- -->
<li class="dot"></li>
</ul>
<div id="testim-content" class="cont">
<div class="active">
<div class="img">
<img
src="https://source.unsplash.com/1600x900/?nature,water"
alt=""
/>
</div>
<h2>Lorem P. Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.
</p>
</div>
<div>
<div class="img">
<img
src="https://source.unsplash.com/1600x900/?nature,water"
alt=""
/>
</div>
<h2>Mr. Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.
</p>
</div>
<div>
<div class="img">
<img
src="https://source.unsplash.com/1600x900/?nature,water"
alt=""
/>
</div>
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.
</p>
</div>
<div>
<div class="img">
<img
src="https://source.unsplash.com/1600x900/?nature,water"
alt=""
/>
</div>
<h2>Lorem De Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.
</p>
</div>
<div>
<div class="img">
<img
src="https://source.unsplash.com/1600x900/?nature,water"
alt=""
/>
</div>
<h2>Ms. Lorem R. Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.
</p>
</div>
</div>
</div>
<!-- </div> -->
</section>
<script src="https://use.fontawesome.com/1744f3f671.js"></script>
</body>Responsive Resume/CV Website Using HTML & CSS
We will first use the unordered list tag to make an unordered list, and then we will use the image tag to add an image to our testimonials to add structure. We will use the h2 and p tags to add some content and a heading beneath that. For our testimonial slider, we will also add more compartments.
There is all Html Code for the Testimonial Slider. Now, you can see output without Css and JavaScript. then we write Css for styling the Testimonial Slider and use JavaScript for Sliding animation in Testimonial Slider.
Restaurant Website Using HTML And CSS With Source Code
Html Code Output:-
CSS Code For Testimonial Slider:-
@import url(//cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-font.css);
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: default;
}
html {
width: 100%;
height: auto;
}
body {
width: 100%;
height: auto;
font-size: 16px;
font-family: Dubai-Light;
background: rgba(30, 30, 30);
}
.testim {
width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translatey(-50%);
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding: 5px;
z-index: 22222222;
}
.testim .arrow:before {
cursor: pointer;
}
.testim .arrow:hover {
color: #ea830e;
}
.testim .arrow.left {
left: 10px;
}
.testim .arrow.right {
right: 10px;
}
.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;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
}
.testim .dots .dot.active,
.testim .dots .dot:hover {
background: #ea830e;
border-color: #ea830e;
}
.testim .dots .dot.active {
-webkit-animation: testim-scale 0.5s ease-in-out forwards;
-moz-animation: testim-scale 0.5s ease-in-out forwards;
-ms-animation: testim-scale 0.5s ease-in-out forwards;
-o-animation: testim-scale 0.5s ease-in-out forwards;
animation: testim-scale 0.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 {
-webkit-animation: testim-show 0.5s ease-in-out forwards;
-moz-animation: testim-show 0.5s ease-in-out forwards;
-ms-animation: testim-show 0.5s ease-in-out forwards;
-o-animation: testim-show 0.5s ease-in-out forwards;
animation: testim-show 0.5s ease-in-out forwards;
}
.testim .cont div.active h2 {
-webkit-animation: testim-content-in 0.4s ease-in-out forwards;
-moz-animation: testim-content-in 0.4s ease-in-out forwards;
-ms-animation: testim-content-in 0.4s ease-in-out forwards;
-o-animation: testim-content-in 0.4s ease-in-out forwards;
animation: testim-content-in 0.4s ease-in-out forwards;
}
.testim .cont div.active p {
-webkit-animation: testim-content-in 0.5s ease-in-out forwards;
-moz-animation: testim-content-in 0.5s ease-in-out forwards;
-ms-animation: testim-content-in 0.5s ease-in-out forwards;
-o-animation: testim-content-in 0.5s ease-in-out forwards;
animation: testim-content-in 0.5s ease-in-out forwards;
}
.testim .cont div.inactive .img img {
-webkit-animation: testim-hide 0.5s ease-in-out forwards;
-moz-animation: testim-hide 0.5s ease-in-out forwards;
-ms-animation: testim-hide 0.5s ease-in-out forwards;
-o-animation: testim-hide 0.5s ease-in-out forwards;
animation: testim-hide 0.5s ease-in-out forwards;
}
.testim .cont div.inactive h2 {
-webkit-animation: testim-content-out 0.4s ease-in-out forwards;
-moz-animation: testim-content-out 0.4s ease-in-out forwards;
-ms-animation: testim-content-out 0.4s ease-in-out forwards;
-o-animation: testim-content-out 0.4s ease-in-out forwards;
animation: testim-content-out 0.4s ease-in-out forwards;
}
.testim .cont div.inactive p {
-webkit-animation: testim-content-out 0.5s ease-in-out forwards;
-moz-animation: testim-content-out 0.5s ease-in-out forwards;
-ms-animation: testim-content-out 0.5s ease-in-out forwards;
-o-animation: testim-content-out 0.5s ease-in-out forwards;
animation: testim-content-out 0.5s ease-in-out forwards;
}
@-webkit-keyframes testim-scale {
0% {
-webkit-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-webkit-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-webkit-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-webkit-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-moz-keyframes testim-scale {
0% {
-moz-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-moz-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-moz-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-moz-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-ms-keyframes testim-scale {
0% {
-ms-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-ms-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-ms-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-ms-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-o-keyframes testim-scale {
0% {
-o-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-o-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-o-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-o-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@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;
}
}
@-webkit-keyframes testim-content-in {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes testim-content-in {
from {
opacity: 0;
-moz-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes testim-content-in {
from {
opacity: 0;
-ms-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes testim-content-in {
from {
opacity: 0;
-o-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes testim-content-in {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes testim-content-out {
from {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-moz-keyframes testim-content-out {
from {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-ms-keyframes testim-content-out {
from {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-o-keyframes testim-content-out {
from {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes testim-content-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
@-webkit-keyframes testim-show {
from {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes testim-show {
from {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes testim-show {
from {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes testim-show {
from {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes testim-show {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes testim-hide {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-moz-keyframes testim-hide {
from {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
}
@-ms-keyframes testim-hide {
from {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
}
@-o-keyframes testim-hide {
from {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
}
@keyframes testim-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}
@media all and (max-width: 300px) {
body {
font-size: 14px;
}
}
@media all and (max-width: 500px) {
.testim .arrow {
font-size: 1.5em;
}
.testim .cont div p {
line-height: 25px;
}
}
Inside our CSS, we will first import some new Google fonts for our testimonial slider, and then using the universal selector, we will set the padding and margin as “zero” and web sizing is set as “border-box”, then using the html property, we will set the width as “100%” and the height is set to the auto
Snake Game Using HTML,CSS and JavaScript With Source Code
The styling for the testimonials will then be added using the class selector technique. We’ll use the font property to set the typeface color to “white” and the display property to set the display to “block.” We will apply the styling and the slider to the testimonials using the animation and keyframes properties.
To learn CSS concepts and gain practical experience on the project, I would advise you to read through the CSS once and attempt to incorporate your own style.
Now we have completed our Css section. Here is our updated output HTML + CSS.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Html + Css Output:-
Now add javascript for Testimonial Slider functionality.
JavaScript Code For Testimonial Slider:-
// 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,
touchStartPos,
touchEndPos,
touchPosDiff,
ignoreTouch = 30;
;
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)
}
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);
// keyboard shortcuts
document.addEventListener("keyup", function(e) {
switch (e.keyCode) {
case 37:
testimLeftArrow.click();
break;
case 39:
testimRightArrow.click();
break;
case 39:
testimRightArrow.click();
break;
default:
break;
}
})
testim.addEventListener("touchstart", function(e) {
touchStartPos = e.changedTouches[0].clientX;
})
testim.addEventListener("touchend", function(e) {
touchEndPos = e.changedTouches[0].clientX;
touchPosDiff = touchStartPos - touchEndPos;
console.log(touchPosDiff);
console.log(touchStartPos);
console.log(touchEndPos);
if (touchPosDiff > 0 + ignoreTouch) {
testimLeftArrow.click();
} else if (touchPosDiff < 0 - ignoreTouch) {
testimRightArrow.click();
} else {
return;
}
})
}We will first use the document.queryselector method in our javascript to select every HTML element, and then we will use the if else method. The styling for the images will then be added using the window load function as the window loads using the if else method, and using the click event property, we will add the event listener to the button as the user taps on the icons, changing the slider.
10+ HTML CSS Projects For Beginners (Source Code)
You can simply read the code to get a proper grasp of how we added a slide automation and event listeners to the buttons by using the fundamental javascript method.
Final Output Of Testimonial Slider Codepen
Video Output Of Testimonial Slider:
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Now we have completed our javascript section, Hope you like the Testimonial Slider you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
ADVERTISEMENT
Thank you.
ADVERTISEMENT
credit codepen user: @feyinwa
ADVERTISEMENT
In this post, we learn how to create Testimonial Slider Using HTML, CSS, and JavaScript on Codepen. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
ADVERTISEMENT
Written by – Code With Random/Anki
Which code editor do you use for this Testimonial Slider coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
What is Testimonial Slider?
There is a part on a website called a testimonial slider where the product owner can add customer reviews, pictures, and experiences.
What is the purpose of Testimonial Slider?
One of the main reason to add testimonial sliders inside the website because to gain user traffic and trust to our website and to show them about the quality of product you provides.
