Показатель функции карусели ⇐ CSS

[Anonymous]

У меня есть раздел «Отзыв» на веб -сайте, который включает в себя скользящую функцию, чтобы показать предыдущий/следующий отзыв. Теперь, однако, эта функция не работает должным образом. В центре должен быть только один отзыв в центре, а на первом отзывчике (из общего числа 3) левая кнопка должна быть отключена, а на последнем (3 -м) отзывном - правая кнопка должна быть отключена. Прямо сейчас это выглядит странно, как это: отзывы
Должен быть по одному отзыву за раз.
Вот мой код (html):


What Our Users Say
Trusted by Users & Consultants


❮



★★★★★

"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



❯


< /code>
css: < /p>
/* 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>
javascript: < /p>
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);
}



Подробнее здесь: https://stackoverflow.com/questions/794 ... l-function