Как плавать элементы в div, который меньше, чем его плавающие элементы?

Question

Я хочу построить свою собственную карусель для обучения. Но мне любопытно, как это сделать правильно. Я попытался поместить divs в карусели рядом друг с другом с поплавком: слева. Каждый div имеет фиксированную ширину и высоту.

После этого я поставил div вокруг элементов карусели, получивших название «обрезка». Обрезающий div имеет тот же размер, что и элементы в нем, которые должны перемещаться за раз (если вы перемещаете 3 элемента, нажимая «next», ширина обрезающего div равна ширине этих трех элементов). Я видел это в нескольких примерах. Также этот обрезной div переполняется: скрывается, чтобы скрыть следующие и предыдущие элементы карусели.

Проблема в том, что элементы, которые должны быть спрятаны с помощью отсечения div, помещаются на новую линию, что делает все это непригодным для использования.

Как я могу обойти это поведение?

Если вопрос не достаточно ясен, скажите, я попробую переписать его.

Answer 1

Вы могли бы сделать что-то вроде этого:

<div id="a"> 
    <div id="b"> 
    <div id="1"></div> 
    <div id="2"></div> 
    <div id="3"></div> 
    </div> 
</div> 

"а" имеет фиксированную ширину. Это похоже на обертку всего, с переполнением, скрытым и так далее.

«b» имеет фиксированную ширину участка. Это оболочка содержимого divs (1,2,3), чтобы они не попадали на следующую строку.

1, 2, 3 просто плавайте влево, как вы делали.

Answer 2

«Эффекты горизонтальной прокрутки карусели» обычно выполняются с помощью широкоугольного объекта с фиксированной шириной в узком контейнере с фиксированной шириной с overflow:hidden. Вы можете попробовать добавить контейнер с фиксированной шириной вокруг ваших плавающих ящиков, чтобы они были выложены независимо от узкого контейнера.