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

[Guest]

Ich habe auf meiner Website einen Abschnitt für Erfahrungsberichte mit reinem CSS- und JQuery-Code erstellt, weil ich die Verwendung von Bibliotheken und Frameworks von Drittanbietern auf meiner Website minimieren möchte. In meinem Testimonial-Bereich wird nur 1 in einer Reihe angezeigt, aber ich möchte, dass 3 in einer Reihe angezeigt werden, und kann für weitere Testimonials verschoben werden. Wie kann ich meinen Code so ändern, dass er 3 in Zeilen anzeigt? Ich habe meine Recherche durchgeführt, indem ich mir verschiedene Artikel/Websites angesehen habe, aber alle zeigen nur einen Erfahrungsbericht pro Zeile, wie ich es bereits erreicht habe.
Aktuelle Referenz
Wie kann ich meinen Code so ändern, dass 3 in einer Zeile angezeigt werden, ich aber nur reines CSS und JS ohne Drittanbieter verwenden möchte?
Das ist mein Code

Code: Select all

 //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;

Code: Select all

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

Code: Select all

Testimonial Slider






TESTIMONIALS


<
>