Создание горизонтальной карусели с навигационными кнопками

Условие

Сделайте интерактивную карусель, включающую две управляющие кнопки – «влево» и «вправо». Карусель должна отображать 10 квадратных элементов размером 100 × 100 px. При нажатии на кнопку «влево» или «вправо» содержимое карусели должно сдвигаться на один элемент в соответствующую сторону.

Ответ

Сделайте окно фиксированной ширины с overflow: hidden и горизонтальную flex-ленту. Храните индекс первого видимого квадрата и сдвигайте ленту на index × 100px.

Пример с тремя видимыми квадратами:

<button id="left" aria-label="Влево">←</button>
<div class="viewport"><div id="track"></div></div>
<button id="right" aria-label="Вправо">→</button>

.viewport { width: 300px; overflow: hidden; }
#track { display: flex; transition: transform .2s ease; }
.item { flex: 0 0 100px; height: 100px; box-sizing: border-box; border: 1px solid; }
@media (prefers-reduced-motion: reduce) { #track { transition: none; } }

const track = document.querySelector('#track');
const left = document.querySelector('#left');
const right = document.querySelector('#right');
for (let i = 1; i <= 10; i++) {
  const item = document.createElement('div');
  item.className = 'item'; item.textContent = String(i); track.append(item);
}
let index = 0;
function render() {
  track.style.transform = `translateX(${-index * 100}px)`;
  left.disabled = index === 0; right.disabled = index === 7;
}
left.onclick = () => { index = Math.max(0, index - 1); render(); };
right.onclick = () => { index = Math.min(7, index + 1); render(); };
render();

Скрипт выполняется после создания DOM. Максимальный индекс 10 − 3 = 7; при другом числе видимых элементов границу нужно пересчитать.