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

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

От автора: в данном уроке будет показано создание карусели на чистом CSS. Здесь нет JavaScript здесь вообще! Нет плагинов jQuery. Нет хаков. Просто пара новых CSS-свойств, с которыми я экспериментировал, а также немного базового HTML.

Хорошо, чтобы начать, нам нужно сосредоточиться на разметке. Дизайн включает в себя левый блок навигации, состоящий из изображений, и большую галерею изображений справа, которая позволяет нам прокручивать каждое изображение в отдельности. Нам также понадобится оболочка, чтобы организовать макет:

Далее мы можем добавлять изображения! Для этого небольшого примера я просмотрел наш список сайтов с высококачественными изображениями, которые вы можете использовать бесплатно, и остановил свой выбор на Unsplash.

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

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

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

После сохранения изображений с помощью диспетчера ресурсов CodePen я начал добавлять URL-адреса в элемент nav:

Видите, что href каждой из этих ссылок указывает на идентификатор? Это потому, что если мы снова посмотрим демонстрацию, то увидим, что нам нужно иметь возможность кликнуть изображение, а затем мы хотим, чтобы в галерее справа отобразилась увеличенная версия.

Итак, теперь мы можем начать добавлять эти изображения и в большую галерею…

Отлично. Следующая забавная часть: стилизация этого. Мы можем использовать макет сетки для родительского .wrapper и установить некоторые интеллектуальные значения по умолчанию для элемента img:

Пока что у нас отсортирован макет и настроены ссылки. Далее, давайте учтем переполнение за пределы нашей оболочки, и обеспечим, чтобы навигация и галерея были прокручиваемы:

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

Далее, давайте сосредоточимся на снимке каждого изображения в галерее. Для этого нам нужно использовать свойства scroll-snap-type и scroll-snap-align следующим образом:

Теперь попробуйте снова прокрутить галерею с правой стороны:

У нас есть довольно крутая карусель! Теперь все, что нам нужно сделать, это привести в порядок дизайн, потому что изображение галереи занимают не всю высоту экрана. Для этого мы можем использовать object-fit и задать для каждого изображения min-height с помощью единиц измерения vh:

Теперь изображения большой галереи всегда будут занимать полный размер экрана и будут масштабироваться по ширине и высоте. Давайте продолжим и займемся стилем маленьких изображений навигации:

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

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

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

Сначала я сделал эту маленькую навигацию похожей на карусель, но это было действительно странно. Сейчас просто используется поведение scroll по умолчанию. Однако в приведенной выше демонстрации попробуйте кликнуть изображение. Заметьте, как мы сразу переходим к изображению в карусели? Было бы хорошо, если бы мы могли немного анимировать этот переход — и мы можем!

Свойство CSS scroll-behavior очень удобно для этого:

Отлично, правда? Еще одна крошечная деталь, которую мы могли бы здесь изменить, это добавить фильтр к элементам навигации, чтобы они стали черно-белыми, а затем анимировать его при наведении:

Я уверен, что мы могли бы сделать намного больше, но я думаю, что уже очень хорошо!

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

Вот и все! Теперь у нас есть карусель, которая чертовски хороша для прогрессивного улучшения, и это означает, что нам не нужно загружать библиотеку JavaScript или писать больше кода, чем нам действительно нужно.

Делаем карусель адаптивной…

Давайте сделаем еще один шаг вперед и добавим адаптивные функции. Мы хотим изменить порядок сетки, переместив все текущие стили в медиа-запрос, который активируется только на больших экранах.

Возможно, вы захотите открыть эту демонстрацию в новой вкладке и уменьшить / увеличить размер окна браузера, чтобы увидеть изменения:

Если вы загрузите эту демонстрацию на мобильном устройстве, вы должны увидеть, как раскладка переключается между двумя режимами. Это делается с помощью одного медиа-запроса для элемента .wrapper. Обратите внимание, что мы используем Sass:

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

Нам также нужно переключить scroll-type для больших экранов и поменять свойство overflow:

Это основная часть изменений, которые мы должны сделать, и мне теперь все очень нравится! Если бы мы хотели сделать галерею готовой к производству, мы бы подумали о доступности (например, мы, вероятно, не хотим, чтобы программы чтения с экрана считывали все изображения как в блоке навигации, так и в галерее). Кроме того, есть аспект производительности — мы могли бы рассмотреть отложенную загрузку, чтобы изображения отображались только тогда, когда они необходимы. В любом случае, это хорошее начало!

Автор: Robin Rendle

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

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

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

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

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

PSD to HTML

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

Смотреть

Метки:

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

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

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

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