Responsive Testimonials Slider using HTML, CSS and JavaScript

In this tutorial, I am going to teach you “How to Create Responsive Testimonials Slider using HTML, CSS and JavaScript“. Okay, let’s move on to the tutorial.

Responsive Testimonials Slider using HTML, CSS and JavaScript

First, create a “index.html” file and copy paste the following code. You can also download this full project via Github. You can download the required images from GitHub website.

Responsive Testimonials Slider using HTML, CSS and JavaScript

index.html

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

After that, create a another file named “style.css” and copy paste the following code.

style.css

@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;
    }
}

Finally, create a another file named “app.js” and copy paste the following code and run the project.

app.js

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;
    })
})

Final Words

I hope this article helps you to create “Responsive Testimonials Slider using HTML, CSS and JavaScript“. If you have any queries regarding this article then please let me know via the comment section. Share this article with others via social networks.

Share on:

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Comment