Отзывное исправление карусели ⇐ Html

[Anonymous]

У меня есть часть отзывов на моем веб -сайте, как это, когда у меня есть в общей сложности три свидетельства:
< /p>
Теперь, если я добавлю больше отзывов, однако, он становится переполненным так: < /p>

Пусть один раздел будет тремя свидетельствами, как показано На первом изображении. Я хочу в общей сложности три раздела, с тремя свидетельствами на каждый раздел, как я показал на первом изображении. Это должно выглядеть точно так. Таким образом, в общей сложности 9 отзывов (3 секции, 3 отзывов на раздел). < /P>
Вот мой код (в общей сложности 6 отзывов): < /p>
Html: < /p>


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


★★★★★

"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


★★★★★

"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


★★★★★

"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 100%; /* 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;
box-sizing: border-box;
flex-basis: 20%;
max-width: 800px;
}

/* 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 currentTestimonialIndex = 0;
const testimonialsPerSlide = 3;
const totalTestimonials = 9; // Total testimonials
const totalSections = totalTestimonials / testimonialsPerSlide;
const slider = document.querySelector(".testimonial-slider");

function showTestimonial(index) {
let offset = -(index * 100); // Moves 100% per section
slider.style.transform = `translateX(${offset}%)`;
}

function prevTestimonial() {
currentTestimonialIndex = (currentTestimonialIndex === 0) ? totalSections - 1 : currentTestimonialIndex - 1;
showTestimonial(currentTestimonialIndex);
}

function nextTestimonial() {
currentTestimonialIndex = (currentTestimonialIndex === totalSections - 1) ? 0 : currentTestimonialIndex + 1;
showTestimonial(currentTestimonialIndex);
}


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