How to Build a Testimonial Slider using Swiper JS

Ready to Get Coding?

This code is your playground! We've provided the building blocks to create this Testimonial Slider using Swiper JS, but the fun part is making it your own. Click the button and get hands-on with the code. Here are some ideas to spark your creativity:

edit & experiment

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    <link rel="stylesheet" href="style.css">
    <title>How to Build a Testimonial Slider using Swiper JS</title>
</head>

<body>
    <main>
        <section class="testimonial-sec">
            <header>
                <h2 style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;">
                    Testimonials
                    from our satisfied customers</h2>
            </header>
            <div class="testimonial-wrapper"
                style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;">
                <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24">
                    <path fill="#428a87"
                        d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621c.537-.278 1.24-.375 1.929-.311c1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5a3.871 3.871 0 0 1-2.748-1.179Zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621c.537-.278 1.24-.375 1.929-.311c1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5a3.871 3.871 0 0 1-2.748-1.179Z">
                    </path>
                </svg>
                <div class="swiper testimonial-swiper swiper-initialized swiper-horizontal swiper-backface-hidden">
                    <ul class="swiper-wrapper" id="swiper-wrapper-4f4e19e16535b5ac" aria-live="polite"
                        style="transition-duration: 0ms; transform: translate3d(-1214px, 0px, 0px);">
                        <li class="swiper-slide" role="group" aria-label="NaN / 4" style="width: 607px;">
                            <h2>customer name 1</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aspernatur assumenda suscipit, molestias fugiat dolorum dolor temporibus quo voluptatibus esse quaerat consequatur iusto illo architecto harum velit neque, cumque veritatis ipsam quas numquam pariatur alias, aperiam debitis. Enim molestias dolores, harum quos voluptas odit cum, praesentium, atque possimus pariatur quidem.</p>
                        </li>
                        <li class="swiper-slide swiper-slide-prev" role="group" aria-label="NaN / 4"
                            style="width: 607px;">
                            <h2>customer name 2</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aspernatur assumenda suscipit, molestias fugiat dolorum dolor temporibus quo voluptatibus esse quaerat consequatur iusto illo architecto harum velit neque, cumque veritatis ipsam quas numquam pariatur alias, aperiam debitis. Enim molestias dolores, harum quos voluptas odit cum, praesentium, atque possimus pariatur quidem.</p>
                        </li>
                        <li class="swiper-slide swiper-slide-active" role="group" aria-label="NaN / 4"
                            style="width: 607px;">
                            <h2>customer name 3</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aspernatur assumenda suscipit, molestias fugiat dolorum dolor temporibus quo voluptatibus esse quaerat consequatur iusto illo architecto harum velit neque, cumque veritatis ipsam quas numquam pariatur alias, aperiam debitis. Enim molestias dolores, harum quos voluptas odit cum, praesentium, atque possimus pariatur quidem.</p>
                        </li>
                        <li class="swiper-slide swiper-slide-next" role="group" aria-label="NaN / 4"
                            style="width: 607px;">
                            <h2>customer name 4</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aspernatur assumenda suscipit, molestias fugiat dolorum dolor temporibus quo voluptatibus esse quaerat consequatur iusto illo architecto harum velit neque, cumque veritatis ipsam quas numquam pariatur alias, aperiam debitis. Enim molestias dolores, harum quos voluptas odit cum, praesentium, atque possimus pariatur quidem.</p>
                        </li>
                    </ul>
                    <div
                        class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                        <span class="swiper-pagination-bullet" tabindex="0" role="button"
                            aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0"
                            role="button" aria-label="Go to slide 2"></span><span
                            class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                            aria-label="Go to slide 3" aria-current="true"></span><span class="swiper-pagination-bullet"
                            tabindex="0" role="button" aria-label="Go to slide 4"></span>
                    </div>
                    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
            </div>
        </section>
    </main>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        // --------------------------------------- Testimonial Swipers ---------------------------------------
        var swiper = new Swiper(".testimonial-swiper", {
            centeredSlides: true,
            loop: true,
            autoplay: {
                delay: 3500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });</script>
</body>

</html>

/* --------------------------------------- Font family link --------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  --primary-color: #428a87;
  --bg-color: #f0f1f3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.2s linear;
  text-decoration: none;
  font-family: "Nunito Sans", sans-serif;
}

::selection {
  background-color: var(--primary-color);
  color: white;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
  background-color: var(--bg-color);
}

ul li {
  list-style: none;
}

section {
  overflow: hidden;
}

section header {
  position: relative;
  z-index: 10;
}

section header h2 {
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  padding: 0 1rem;
  margin: auto;
  width: fit-content;
  text-align: center;
}

section header h2::before,
section header h2::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 3px;
  top: 50%;
  background-color: var(--primary-color);
}

section header h2::before {
  left: -18%;
}

section header h2::after {
  right: -18%;
}

.testimonial-sec {
  background-image: url(https://zonetocode.com/edit-and-experiment/image/how-to-build-a-testimonial-slider-using-swiper-js-ede-page-bg.jpg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 6rem 9rem;
}

.testimonial-sec header h2 {
  opacity: 0;
  transform: translate(0px, 3rem);
}

.testimonial-wrapper {
  width: 607.21px;
  padding: 3.5rem 0rem;
}

.testimonial-sec ul {
  padding-bottom: 1rem;
}

.testimonial-sec ul li {
  user-select: none;
}

.testimonial-sec ul li h2 {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: capitalize;
}

.testimonial-sec ul li p {
  padding: 0.6rem 0px;
  font-size: 1rem;
  font-weight: 500;
  text-align: justify;
}

.testimonial-swiper .swiper-pagination {
  bottom: -5px !important;
}

.testimonial-swiper .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

@media only screen and (max-width: 1280px) {
  .testimonial-sec {
    padding: 4rem 6rem;
  }
}

@media only screen and (max-width: 1024px) {
  section header h2 {
    font-size: 1.5rem;
  }

.testimonial-sec {
    padding: 4rem;
  }
}

@media only screen and (max-width: 768px) {
  section header h2 {
    font-size: 1.3rem;
  }

.testimonial-sec {
    padding: 4rem 2rem;
  }

.testimonial-wrapper {
    margin: 0 auto;
    width: 100%;
  }

.testimonial-sec ul li p {
    padding: 0px;
  }
}

@media only screen and (max-width: 568px) {
  section header h2 {
    font-size: 1.3rem;
  }
}

@media only screen and (max-width: 420px) {
  section header h2 {
    font-size: 1.3rem;
  }

section header h2::before {
    left: -12%;
  }

section header h2::after {
    right: -12%;
  }
}

Don't be afraid to experiment!

The beauty of coding is that there's usually more than one way to achieve something. Feel free to break things and try again. That's the best way to learn and become a confident coder.

Get your custom static website starting at just ₹5000!

follow uS

share on

How to Build a Testimonial Slider using Swiper JS

Ready to Get Coding?

Don't be afraid to experiment!

similar articles

Breadcrumb using HTML & CSS

Login Form using HTML and CSS

accordion using html, css and javascript

leave a comment

check it out!

The Future of Neuralink

follow uS

share on

Ready to Get Coding?

**Don't be afraid to experiment! **

Breadcrumb using HTML & CSS

Login Form using HTML and CSS

accordion using html, css and javascript

The Future of Neuralink

Don't be afraid to experiment!