Создайте отзыв о слайдере с помощью чистого CSS и JS ⇐ CSS

[Anonymous]

Я создал на своем веб-сайте раздел для отзывов с использованием чистого кода CSS и jquery, потому что хочу свести к минимуму использование сторонних библиотек и фреймворков на своем веб-сайте. в моем разделе отзывов отображается только 1 подряд, но я хочу, чтобы он отображал 3 подряд, и я могу сдвинуть его, чтобы увидеть больше отзывов. как я могу изменить свой код, чтобы он отображал 3 ряда. Я провел исследование, просматривая различные статьи/веб-сайты, но все они показывают только один отзыв в строке, как я уже достиг.
Текущая ссылка
как я могу изменить свой код для отображения 3 строк в строке, но я хочу использовать только чистый CSS и JS без сторонних разработчиков.
Это мой код

Код: Выделить всё

 //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]${testimonials[t].image}[/img]
${testimonials[t].name}
${testimonials[t].job}
${testimonials[t].testimonial}
`;
};
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;
}
}

Код: Выделить всё

Testimonial Slider






TESTIMONIALS


<
>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ure-css-js