От автора: интересно, насколько далеко вы сможете отойти от HTML и CSS при создании карусели / слайд-шоу.
Давайте посмотрим.
Установить несколько блоков в горизонтальном ряду с помощью flexbox очень просто.
Показывать только один блок за раз через overflow и сделать его удобным для просмотра через -webkit-overflow-scrolling просто.
Вы можете сделать так, чтобы «слайды» соответствовали друг другу через scroll-snap-type.
Пара #jump-links — это все, что вам нужно для навигации, с которой вы можете сделать все красиво и плавно.
Кристиан Шефер продвинулся немного дальше, добавив кнопки «Следующий» и «Предыдущий», а также функцию автоматического воспроизведения, которая останавливает воспроизведение после начала взаимодействия.
Об этом автовоспроизведении — это реально крутой трюк CSS:
Сначала я медленно смещаю точки привязки прокрутки вправо, чтобы область прокрутки следовала этому из-за привязки к ним.
Прокрутив карусель на ширину всего слайда, я деактивирую привязку. Область прокрутки теперь не связана с точками привязки прокрутки.
Теперь я позволил точкам привязки прокрутки отскочить назад к их начальным положениям без «перетаскивания» области прокрутки назад с ними.
Затем я снова включаю привязку, которая теперь позволяет области прокрутки привязываться к другой точке.
Отлично. Слайд-шоу на основе JavaScript (например, с помощью Flickty) тоже могут быть очень красивыми. Есть что-то аккуратное в том, чтобы сделать это с таким небольшим количеством кода.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.
