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

[Anonymous]

Я создаю на своем веб-сайте раздел для отзывов с использованием чистого кода CSS и jquery, потому что хочу свести к минимуму использование стороннего контента на своем веб-сайте. мой отзыв показывает только 1 в строке отображения, но я хочу, чтобы в ряду было 3, и я могу сдвинуть его для получения большего количества отзывов. как я могу изменить свой код, чтобы он мог отображать 3 строки. Я провел исследование в различных статьях, но в каждой строке отображается только один отзыв, как и я. Итак, может ли кто-нибудь здесь мне помочь, я новичок на этом форуме.
как я могу изменить свой код для отображения 3 в строке, но я хочу использовать только чистый CSS и js без сторонних разработчиков.< /p>
Кстати, это мой код.



Testimonial Slider

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








TESTIMONI


<
>





//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 = `

${testimonials[t].name}
${testimonials[t].job}
${testimonials[t].testimonial}
`;
};
window.onload = displayTestimonial;






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