Create slider testimonial with pure css & js

Question

i created a section for testimonial in my website with pure css and jquery code because i want to minimize the use of 3rd party libraries and frameworks from my website. my testimonial section only shows 1 in a row but i want it to show 3 in row and can slide for more testimonial. how i can change my code for it to show 3 in rows. i have done my research by viewing various articles/website but all of them only show one testimonial per row like i have already achieved.

Current Reference

how can i change my code to display 3 in row but i want only use pure css & js without 3rd party.

This My code

 //Testimonial Data
 const testimonials = [
      {
        image: "{{asset('assets/img/prof%20testimoni1.png')}}",
        name: "name 1",
        job: "-",
        testimonial:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
      },
      {
        image: "{{asset('assets/img/prof%20testimoni1.png')}}",
        name: "name 2",
        job: "-",
        testimonial:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
      },
      {
        image: "{{asset('assets/img/prof%20testimoni1.png')}}",
        name: "name 3",
        job: "-",
        testimonial:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
      },
      {
        image: "{{asset('assets/img/prof%20testimoni1.png')}}",
        name: "name 4",
        job: "-",
        testimonial:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
      },
    ];
    
    //Current Slide
    let t = 0;
    //Total Slides
    let j = testimonials.length;
    
    let testimonialContainer = document.getElementById("testimonial-container");
    let nextBtn = document.getElementById("next");
    let prevBtn = document.getElementById("prev");
    
    nextBtn.addEventListener("click", () => {
      t = (j + t + 1) % j;
      displayTestimonial();
    });
    prevBtn.addEventListener("click", () => {
      t = (j + t - 1) % j;
      displayTestimonial();
    });
    
    let displayTestimonial = () => {
      testimonialContainer.innerHTML = `
        <img src=${testimonials[t].image}>
        <h3>${testimonials[t].name}</h3>
        <h6>${testimonials[t].job}</h6>
        <p>${testimonials[t].testimonial}</p>
      `;
    };
    window.onload = displayTestimonial;

 .wrapper {
      background-color: #ffffff;
      position: absolute;
      width: 80vw;
      max-width: 41em;
      min-height: 25em;
      border-radius: 0.6em;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      box-shadow: 0 1.8em 3em rgba(1, 17, 39, 0.15);
      display: flex;
    }
    .testimonial-container {
      width: 85%;
      height: 100%;
      position: relative;
      margin: auto;
      padding: 1.8em 1.2em;
    }
    .wrapper button {
      font-size: 1.8em;
      height: 2.2em;
      width: 2.2em;
      background-color: #ffffff;
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      border: none;
      color: #0a69ed;
      box-shadow: 0 0 1em rgba(1, 17, 39, 0.25);
      cursor: pointer;
      border-radius: 50%;
    }
    button#next {
      right: -1.1em;
    }
    button#prev {
      left: -1.1em;
    }
    .testimonial-container p {
      color: #8c8c90;
      text-align: center;
      font-size: 0.9em;
      line-height: 2em;
      letter-spacing: 0.05em;
    }
    .testimonial-container img {
      display: block;
      margin: 1.8em auto 1.25em auto;
      border-radius: 50%;
      width: 4.4em;
    }
    .testimonial-container h3 {
      color: #2d3d67;
      font-size: 1em;
      text-align: center;
    }
    .testimonial-container h6 {
      color: #bcc4da;
      font-size: 0.9em;
      letter-spacing: 0.03em;
      font-weight: 400;
      text-align: center;
    }
    @media screen and (max-width: 650px) {
      .wrapper {
        font-size: 14px;
      }
    }

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testimonial Slider</title>
  </head>
  <body>
    <div class="container mt-5 align-self-center text-center" id="lazytext">
    <hr>
      <div class="row" style="font-family: 'Poppins', sans-serif;">
        <div class="col-12 p-0">
            <h3 class="mb-4" style="font-family: 'Poppins Semibold', sans-serif;">TESTIMONIALS</h3>
            <br/>
            </div>
            <div class="wrapper" style="margin-top:160px;">
              <div class="testimonial-container" id="testimonial-container"></div>
              <button id="prev">&lt;</button>
              <button id="next">&gt;</button>
            </div>
        </div>
    </div>
  </body>
</html>

Answer 1

firstly im impressed by your dedication to build things on your own, without depending upon frameworks and libraries, this improves your problem-solving skill and coding knowledge, ( but when time is the constraint, u will have to use third-party frameworks ),

anyways, the requirement of 3 testimonials in a row, is probably what you want it to look on your screen, but on other screen sizes 3 testimonials in a row, would not be responsive and definitely would not be attractive to look at

also the expected solution by you is ambiguous, as of now according to the details provided by you, all i can think of is, you need something similar to a photo slider of college or company website, where the multiple photos of an event are displayed which can be viewed either by sliding on its own , or it has an arrow/ navigation button which allows the user to manually check the users

the solution what i can think is you are currently expecting is something similar to a navigable slider,

example :

to achieve the above design, you should have a outer-container which would act as the parent element for the testimonials and the navigation buttons, inside the container, whose display should be set as flex ( display:flex; ) , it should contain 3 divs each for left navgition, middle for the testimonials and the right navgiation,inside the testimonials section you have add each individual testimonial using jquery, and each testimonial changes based upon the navigation button pressed

for navigating or view other testimonials there are different ways

• firstly either changing all the testimonials to new remaining testimonials, ( unpopular option )
• the other way is removing the first testimonial from the left and adding a new to the right

also the way to change or navigate to other testimonials also has many ways

• preloading all the testimonials and hiding them expect the first three, and based upon the navigation unhide respective testimonials
• removing a testimonial from the view and the parent, then adding a new one
• or changing the contents of the the previous testimonials

let me know your requirement and the method to view/navigate other testimonials, all the methods mentioned above have their own pros and cons, such as resource overhead, complexity of code, performance etc... research on these topic and based upon your choice, let me know your requirement to continue with

i havent provided and full answer to your problem, because your required expected solution lacks these details, confirm if the design mentioned by me is the same as what you were looking for, and also mention the other method and requirements mentioned by me above, also should the design behave based on a custom design for different screen sizes, or it should behave like common and popular slider-views

hope this answer was helpful for you/others to get info about the first step in it, any question about the answer or related to your question,feel free to ask