Есть ли ограничения на ширину элементов в HTML? ⇐ Html

[Anonymous]

Я делаю слайдер. Проблема заключается в том, что когда существует более 8 слайдов, ползунок разрывается (кнопка вперед исчезает, и ширина слайда увеличивается). Возможно, проблема в том, что в них слишком много контента? Но как решить это? Code-JS Lang-Js PrettyPrint-Override ">

Код: Выделить всё

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>
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);
}

.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>



[i][/i]




[i]

Slide 1
Some desc




[img]placeholder.jpg[/img]

Slide 2
Some desc




[img]placeholder.jpg[/img]

Slide 3
Some desc




[img]placeholder.jpg[/img]

Slide 4
Some desc




[img]placeholder.jpg[/img]

Slide 5
Some desc




[img]placeholder.jpg[/img]

Slide 6
Some desc




[img]placeholder.jpg[/img]

Slide 7
Some desc




[img]placeholder.jpg[/img]

Slide 8
Some desc




[img]placeholder.jpg[/img]

Slide 9
Some desc





[/i]

Подробнее здесь: https://stackoverflow.com/questions/794 ... ts-in-html