Привязка слайдов, расширяющая ширину экрана до центра с помощью привязки прокрутки CSS ⇐ CSS

[Гость]

Мне нужен слайдер, в котором каждый слайд шире области просмотра, но центр каждого слайда привязывается к центру области просмотра. Таким образом, слова «Слайд» должны располагаться по центру экрана. Вот что у меня есть:

body { маржа: 0; заполнение: 0; семейство шрифтов: без засечек; } .scroller { дисплей: гибкий; ширина: 100vw; переполнение-х: прокрутка; тип прокрутки-привязки: x обязательно; } .горка { прокрутка-привязка-выравнивание: по центру; гибкое сжатие: 0; дисплей: гибкий; гибкая основа: 160vw; ширина: 160vw; высота: 100вх; выровнять-элементы: по центру; оправдание-содержание: центр; } .slide:nth-child(even) { фон: #aa4; } .slide:nth-child(нечетный) { фон: #4aa; Слайд Слайд Слайд Слайд Слайд Слайд Слайд

Но неожиданно слайды привязываются к началу и концу области просмотра. Что мне нужно изменить?

Песочница: https://codesandbox.io/p/sandbox/blissf ... index.html