HomeTestimonialHow To Create Testimonial Slider Using HTML CSS JavaScript

How To Create Testimonial Slider Using HTML CSS JavaScript

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:

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 –

RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

- Advertisment -

Categories