ZeugnisfunktionJavaScript

Javascript-Forum
Guest
 Zeugnisfunktion

Post by Guest »

Ich habe einen Testimonial -Abschnitt auf einer Website, in dem eine Gleitfunktion zur Anzeige des vorherigen/nächsten Testimonials angezeigt wird. Jetzt funktioniert diese Funktion jedoch nicht ordnungsgemäß. In der Mitte sollte nur ein Zeugnis in der Mitte vorhanden sein, und beim ersten Testimonial (von insgesamt 3) sollte die linke Taste deaktiviert sein, und beim letzten (3.) Testimonial sollte die rechte Taste deaktiviert sein. Im Moment sieht es so seltsam aus:

Es sollte jeweils ein Testimonial geben. = "Snippet-Code">

Code: Select all

let currentTestimonial = 0;
const testimonials = document.querySelectorAll(".testimonial");
const totalTestimonials = testimonials.length;

function showTestimonial(index) {
const slider = document.querySelector(".testimonial-slider");
slider.style.transform = `translateX(-${index * 100}%)`;
}

function prevTestimonial() {
currentTestimonial = (currentTestimonial === 0) ? totalTestimonials - 1 : currentTestimonial - 1;
showTestimonial(currentTestimonial);
}

function nextTestimonial() {
currentTestimonial = (currentTestimonial === totalTestimonials - 1) ? 0 : currentTestimonial + 1;
showTestimonial(currentTestimonial);
}< /code>
/* Testimonials Section */
.testimonials-container {
background-color: #E7C79A;
/* Soft beige background matching the website */
padding: 60px 50px;
text-align: center;
border-radius: 15px;
margin-top: 50px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
}

/* Section Title */
.testimonials-title {
color: rgba(50, 40, 30, 0.8);
letter-spacing: 1px;
margin-bottom: 5px;
}

.testimonials-heading {
font-weight: bold;
color: #6D4C41;
/* Brown color matching the website */
margin-bottom: 30px;
/* Moved testimonials 30px down */
}

/* Testimonials Wrapper */
.testimonial-wrapper {
display: flex;
justify-content: center;
/* Centers the testimonial */
align-items: center;
position: relative;
overflow: hidden;
width: 100%;
}

/* Hide testimonials except for the active one */
.testimonial-slider {
display: flex;
transition: transform 0.5s ease-in-out;
/* Smooth sliding effect */
width: 210%;
/* Ensures all testimonials are positioned in a row */
}

.testimonial {
flex: 0 0 70%;
/* Each testimonial takes full width */
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
}

/* Ensure only the active testimonial is shown */
.testimonial.active {
display: block;
}

/* Star Rating */
.star-rating {
color: #F4C150;
/* Gold stars */
font-size: 18px;
}

/* Testimonial Text */
.testimonial-text {
font-size: 16px;
color: rgba(50, 40, 30, 0.9);
line-height: 1.5;
}

/* Testimonial Author */
.testimonial-author {
font-size: 18px;
font-weight: bold;
color: #6D4C41;
/* Brown matching the website */
}

.testimonial-role {
font-size: 14px;
color: rgba(50, 40, 30, 0.7);
}

/* Navigation Buttons */
.testimonial-nav {
position: absolute;
top: 50%;
/* Centers buttons relative to testimonial */
transform: translateY(-50%);
background: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
font-size: 18px;
color: #6D4C41;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.testimonial-nav:hover {
background: #6D4C41;
color: white;
}

.left-nav {
left: 10px;
}

.right-nav {
right: 10px;
}< /code>


What Our Users Say
Trusted by Users & Consultants


&#10094;



★★★★★

"This consultation service made it easy to find the right expert.  The process was seamless, and I got valuable insights!"

James R.
Consultation User


★★★★★

"The platform is intuitive and efficient. I booked a consult within minutes and got exactly the advice I needed!"

Samantha L.
User - Business Strategy Consultation


★★★★★

"As a consultant, I appreciate the seamless booking system. Clients can connect with me easily, and the interface is smooth!"

Dr. Michael K.
Registered Consultant



&#10095;

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post
  • Zeugnisfunktion
    by Guest » » in HTML
    0 Replies
    3 Views
    Last post by Guest
  • Zeugnisfunktion
    by Guest » » in CSS
    0 Replies
    2 Views
    Last post by Guest