Карусель на чистом CSS

Карусель на чистом CSS

От автора: интересно, насколько далеко вы сможете отойти от HTML и CSS при создании карусели / слайд-шоу.

Давайте посмотрим.

Установить несколько блоков в горизонтальном ряду с помощью flexbox очень просто.

Показывать только один блок за раз через overflow и сделать его удобным для просмотра через -webkit-overflow-scrolling просто.

Вы можете сделать так, чтобы «слайды» соответствовали друг другу через scroll-snap-type.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Пара #jump-links — это все, что вам нужно для навигации, с которой вы можете сделать все красиво и плавно.

Кристиан Шефер продвинулся немного дальше, добавив кнопки «Следующий» и «Предыдущий», а также функцию автоматического воспроизведения, которая останавливает воспроизведение после начала взаимодействия.

Об этом автовоспроизведении — это реально крутой трюк CSS:

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

Прокрутив карусель на ширину всего слайда, я деактивирую привязку. Область прокрутки теперь не связана с точками привязки прокрутки.

Теперь я позволил точкам привязки прокрутки отскочить назад к их начальным положениям без «перетаскивания» области прокрутки назад с ними.

Затем я снова включаю привязку, которая теперь позволяет области прокрутки привязываться к другой точке.

Отлично. Слайд-шоу на основе JavaScript (например, с помощью Flickty) тоже могут быть очень красивыми. Есть что-то аккуратное в том, чтобы сделать это с таким небольшим количеством кода.

Автор: Chris Coyier

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий