Warum bricht mein Slider ab, wenn mehr als 8 Folien in HTML vorhanden sind? ⇐ CSS

[Anonymous]

Ich baue einen Slider und bin auf ein Problem gestoßen, bei dem der Slider kaputt geht, wenn mehr als 8 Slides vorhanden sind. Insbesondere verschwindet die Vorwärtstaste und die Folienbreiten werden größer. Ich vermute, dass dies mit der Menge an Inhalten in den Folien zusammenhängt, bin mir aber nicht sicher, wie ich das beheben kann.
Kann jemand helfen, das Problem zu identifizieren und eine Lösung anzubieten?
Hier ist der Code, mit dem ich arbeite:

Code: Select all

document.addEventListener("DOMContentLoaded", () => {
const slider = document.querySelector(".slider");
const slides = document.querySelectorAll(".slide");
const arrowLeft = document.querySelector(".slider-arrow-left");
const arrowRight = document.querySelector(".slider-arrow-right");

let currentIndex = 0;

function updateSlider() {
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
}

arrowRight.addEventListener("click", () => {
if (currentIndex < slides.length - 1) {
currentIndex++;
updateSlider();
} else {
currentIndex = 0;
updateSlider();
}
});

arrowLeft.addEventListener("click", () => {
if (currentIndex > 0) {
currentIndex--;
updateSlider();
} else {
currentIndex = slides.length - 1;
updateSlider();
}
});

let startX = 0;
let isSwiping = false;

slider.addEventListener("touchstart", (e) => {
startX = e.touches[0].clientX;
isSwiping = true;
});

slider.addEventListener("touchmove", (e) => {
if (!isSwiping) return;
const currentX = e.touches[0].clientX;
const diff = startX - currentX;

if (Math.abs(diff) > 50) {
if (diff > 0 && currentIndex < slides.length - 1) {
currentIndex++;
} else if (diff < 0 && currentIndex > 0) {
currentIndex--;
}
updateSlider();
isSwiping = false;
}
});

slider.addEventListener("touchend", () =>  {
isSwiping = false;
});
});

Code: Select all

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #2a2a2a;
color: white;
}

.slider-section {
padding: 20px;
background-color: #1e1e1e;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
margin: 20px auto;
max-width: 1200px;
text-align: center;
}

.slider-container {
display: flex;
align-items: stretch;
justify-content: space-between;
position: relative;
overflow: hidden;
}

.slider {
display: flex;
transition: transform 0.5s ease;
width: calc(100% * 7);
/* This is where I might be going wrong */
}

.slide {
min-width: 100%;
flex: 0 0 100%;
box-sizing: border-box;
padding: 20px;
text-align: center;
overflow: hidden;
}

.slide-image img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}

.slide-title {
font-size: 1.5rem;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.slide-description {
font-size: 1rem;
color: #ccc;
line-height: 1.5;
max-height: 6em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

.slider-arrow {
flex: 0 0 10%;
background: transparent;
border: none;
color: white;
font-size: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
outline: none;
z-index: 100;
}

.slider-arrow:hover {
background-color: rgba(0, 0, 0, 0.5);
transform: scale(1.1);
}

@media (max-width: 768px) {
.slider-arrow {
display: none;
}
}

Code: Select all

[i][/i]





[i]

Slide 1
Some description





[/i]

Problem: Wenn ich mehr als 8 Folien hinzufüge, verschwindet der Vorwärtsnavigationspfeil und die Folienbreiten erhöhen sich. Dies scheint mit der Breite des .slider-Elements zusammenzuhängen, wo ich die Breite festgelegt habe: calc(100% * 7). Ich glaube, ich muss die Anzahl der Folien dynamisch berücksichtigen, bin mir aber nicht sicher, wie ich dieses Problem beheben kann.