Testimonial Slider Using HTML,CSS and JavaScript on Codepen

Create Testimonial Slider Using HTML and CSS With Codepen

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.

Testimonial Slider Using HTML,CSS and JavaScript on Codepen
Testimonial Slider Using HTML,CSS and JavaScript on Codepen
 

 

 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 byfeyinway
Project DownloadLink Available Below
Language usedHTML ,CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Testimonial Slider Table

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

Testimonial Slider Using HTML,CSS and JavaScript on Codepen
 

 

Testimonial Slider Using HTML,CSS and JavaScript on Codepen
 

 

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

 

Testimonial Slider Using HTML,CSS and JavaScript on Codepen
 

 

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:

 

Testimonial Slider Using HTML,CSS and JavaScript on Codepen

 

 

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.



Leave a Reply