Responsive Testimonials Slider using HTML,CSS and JAVASCRIPT | Modern Web 2021

Hello, I am kunaal very glad you are here. Today we will make a responsive testimonials section using only HTML, CSS and JAVASCRIPT no library.

Testimonial sections are very important in personal portfolio's these days. Purpose of Testimonial are to showcase what your client think about you? and What your client says about you?

So today we are making a Testimonial Slider. Which have a very modern design. Our testimonial contain our client image and their words + it also contain rating in term of stars. You can see the its demo in the video below or you can watch the tutorial.

Video Tutorial

Let's Code This

So in order to code this design we need 3 files - HTML, CSS and JS files. And we don't need any other library for this.

So let's make an index.html file remember to give .html as its extension. And write (or copy/paste) these.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Testimonial</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <div class="container">
        <div class="wrapper">
            <div class="card">
                <div class="card-thumb">
                    <img src="img/img-1.jpeg" class="client-img" alt="">
                    <span class="client-name">client one</span>
                </div>
                <div class="card-body">
                    <p class="review">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, nam. Fugiat, ut provident. Nulla quibusdam labore ea est consequatur sequi fuga iusto laudantium, earum doloremque?</p>
                    <div class="rating">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-no-fill.png" class="star" alt="">
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-thumb">
                    <img src="img/img-2.jpeg" class="client-img" alt="">
                    <span class="client-name">client two</span>
                </div>
                <div class="card-body">
                    <p class="review">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, nam. Fugiat, ut provident. Nulla quibusdam labore ea est consequatur sequi fuga iusto laudantium, earum doloremque?</p>
                    <div class="rating">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-no-fill.png" class="star" alt="">
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-thumb">
                    <img src="img/img-3.jpeg" class="client-img" alt="">
                    <span class="client-name">client three</span>
                </div>
                <div class="card-body">
                    <p class="review">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, nam. Fugiat, ut provident. Nulla quibusdam labore ea est consequatur sequi fuga iusto laudantium, earum doloremque?</p>
                    <div class="rating">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-fill.png" class="star" alt="">
                        <img src="img/star-no-fill.png" class="star" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="indicators">
            <button class="active"></button>
            <button></button>
            <button></button>
        </div>
    </div>

    <script src="app.js"></script>

</body>
</html>

This was our HTML structure no we need a CSS file to style our element. Create a style.css file and paste this in on it.

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=Roboto:wght@400&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'dosis';
    color: #080808;
    background: linear-gradient(110deg, #fc6a6a 0%, #ffc69d 100%);
}

.container{
    position: relative;
    width: 800px;
    min-width: 350px;
    min-height: 250px;
    padding-bottom: 40px;
    overflow: hidden;
}

.wrapper{
    width: 300%;
    /* 300% 'caz we have 3 cards */
    min-height: 100%;
    display: flex;
    justify-content: space-between;
    transition: 1s;
}

.card{
    width: 800px;
    min-height: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 0 10px;
}

.card-thumb{
    width: 70%;
    height: 250px;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
}

.client-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-name{
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    padding: 5px 20px;
    background: #fff;
    text-transform: capitalize;
    font-size: 14px;
}

.card-body{
    width: 120%;
    min-height: 100%;
    height: auto;
    margin-left: 20px;
    position: relative;
    padding-bottom: 50px;
}

.review{
    font-size: 20px;
    line-height: 30px;
    margin-top: 30px;
}

.rating{
    position: absolute;
    bottom: 10px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.star{
    width: 25px;
    margin-right: 5px;
}

.indicators{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.indicators button{
    background: none;
    border: none;
    outline: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    margin-left: 5px;
    transition: .5s;
}

button.active{
    width: 40px;
    border-radius: 50px;
    background: #fff;
}

@media (max-width: 800px){
    .container{
        width: 50%;
        margin: auto;
    }
    .card{
        flex-direction: column;
    }
    .card-thumb{
        width: 100%;
        border-radius: 10px;
    }
    .card-body{
        width: 100%;
        min-height: auto;
        margin-left: 0;
    }
}

we are almost done now we need a JAVASCRIPT file to make the slider work. Create app.js file and paste this on it.

const wrapper = document.querySelector('.wrapper');
const indicators = [...document.querySelectorAll('.indicators button')];

let currentTestimonial = 0; // Default 0

indicators.forEach((item, i) => {
    item.addEventListener('click', () => {
        indicators[currentTestimonial].classList.remove('active');
        wrapper.style.marginLeft = `-${100 * i}%`;
        item.classList.add('active');
        currentTestimonial = i;
    })
})