Erstellen Sie ein Slider-Testimonial mit reinem CSS und JS ⇐ HTML

[Guest]

Ich erstelle auf meiner Website einen Abschnitt für Erfahrungsberichte mit reinem CSS- und JQuery-Code, weil ich den Zugriff Dritter auf meine Website minimieren möchte. Mein Testimonial zeigt nur 1 in der Anzeigezeile an, aber ich möchte 3 in der Zeile und kann für weitere Testimonials schieben. Wie ich meinen Code ändern kann, kann 3 in Zeilen anzeigen. Ich habe in verschiedenen Artikeln recherchiert, aber es wird nur ein Erfahrungsbericht pro Zeile angezeigt, wie ich es tue. Kann mir hier jemand helfen? Ich bin neu in diesem Forum.
Wie kann ich meinen Code für die Anzeige von 3 in einer Zeile ändern, aber ich möchte nur reines CSS und JS ohne Drittanbieter verwenden?< /p>
Das ist übrigens mein Code.

Code: Select all

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