DEV Community

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

Posted on

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

To follow this article download images from here

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    })
})
Enter fullscreen mode Exit fullscreen mode

We are done. Our Testimonial is done and its responsive also.

Thank you for reading If you like the article show your support by following me. And if you have any doubts feel free to ask me in comments.

Have a nice day.

You may like reading this.

  1. 🔥Awesome 3d navbar you have never seen it before 🔥🔥

  2. 🔥🔥backend for login form. Easy to make fully working form

3.Awesome animation 🔥🔥 you have never seen it before

4.Awesome header design you have never seen it before

Source Code, Follow me on Instagram, Subscribe my youtube channel

Top comments (0)