Erstellen Sie einen Testimonial -Schieber ⇐ CSS

[Anonymous]

Hoffe, dass einige helfen können, wenn ich mich nut macht. >
Im Moment rutscht es alle drei auf einmal nach rechts und sieht einfach schrecklich aus. < /p>
Dann erneut. < /p>
Jede Hilfe wäre praktisch und dankt im Voraus. Br />

Code: Select all

let currentIndex = 0;
const slides = document.querySelectorAll('.carousel-slide');
const slidesContainer = document.querySelector('.carousel-slides');
const totalSlides = slides.length;

// Function to display the current slide
function showSlide(index) {
const newPosition = -index * (100 / totalSlides); // Move slides left based on index
slidesContainer.style.transition = "transform 0.5s ease-in-out"; // Set transition
slidesContainer.style.transform = `translateX(${newPosition}%)`; // Move slides left
}

// Function to handle the auto-scrolling
function autoScroll() {
currentIndex++;

// If currentIndex goes beyond the last slide
if (currentIndex >= totalSlides) {
currentIndex = 0; // Reset to first slide
slidesContainer.style.transition = "none"; // Disable transition for an instant change
showSlide(currentIndex); // Show the first slide instantly

// Allow a brief pause before transitioning again
setTimeout(() => {
slidesContainer.style.transition = "transform 0.5s ease-in-out"; // Re-enable transition
showSlide(currentIndex); // Show the first slide
}, 50); // Short timeout to feel the transition
} else {
showSlide(currentIndex);
}
}

// Start auto-scrolling every 3 seconds
setInterval(autoScroll, 3000);
showSlide(currentIndex); // Initial display< /code>
.text-carousel {
position: relative;
width: 100%; /* Full width */
max-width: 600px; /* Maximum width */
margin: auto; /* Center the carousel */
overflow: hidden; /* Hides overflow content */
background-color: transparent; /* Transparent background */
}

.carousel-slides {
display: flex; /* Use flex for sliding effect */
transition: transform 0.5s ease-in-out; /* Smooth transition */
width: 300%; /* Set width to accommodate three slides */
}

.carousel-slide {
width: 33.33%; /* Adjust to fit one slide at a time */
box-sizing: border-box; /* Include padding in width */
padding: 20px; /* Space inside slides */
text-align: center; /* Center text */
font-size: 1.2rem; /* Font size */
font-weight: bold; /* Bold text */
color: #20A2D3; /* Text color */
}< /code>



“A unique recruitment, operations and finance solution that expertly supports aspiring businesses bridge their current capabilities and future potential.”

“Genuine people that collaborate by offering a simplistic and excellent approach.”

“Recruitment, Finance, and Operation experts on demand.”