От автора: в данном уроке будет показано создание карусели на чистом CSS. Здесь нет JavaScript здесь вообще! Нет плагинов jQuery. Нет хаков. Просто пара новых CSS-свойств, с которыми я экспериментировал, а также немного базового HTML.
Хорошо, чтобы начать, нам нужно сосредоточиться на разметке. Дизайн включает в себя левый блок навигации, состоящий из изображений, и большую галерею изображений справа, которая позволяет нам прокручивать каждое изображение в отдельности. Нам также понадобится оболочка, чтобы организовать макет:
|
1 2 3 4 |
<div class="wrapper"> <nav class="lil-nav"></nav> <div class="gallery"></div> </div> |
Далее мы можем добавлять изображения! Для этого небольшого примера я просмотрел наш список сайтов с высококачественными изображениями, которые вы можете использовать бесплатно, и остановил свой выбор на Unsplash.
После сохранения изображений с помощью диспетчера ресурсов CodePen я начал добавлять URL-адреса в элемент nav:
|
1 2 3 4 5 6 7 8 9 |
<nav class="lil-nav"> <a href="#image-1"> <img class="lil-nav__img" src="..." alt="Yosemite" /> </a> <a href="#image-2"> <img class="lil-nav__img" src="..." alt="Basketball hoop" /> </a> <!-- more images go here --> </nav> |
Видите, что href каждой из этих ссылок указывает на идентификатор? Это потому, что если мы снова посмотрим демонстрацию, то увидим, что нам нужно иметь возможность кликнуть изображение, а затем мы хотим, чтобы в галерее справа отобразилась увеличенная версия.
Итак, теперь мы можем начать добавлять эти изображения и в большую галерею…
|
1 2 3 4 5 |
<div class="gallery"> <img class="gallery__img" id="image-1" src="..." alt="Yosemite" /> <img class="gallery__img" id="image-2" src="..." alt="Basketball hoop" /> <!-- more images go here --> </div> |
Отлично. Следующая забавная часть: стилизация этого. Мы можем использовать макет сетки для родительского .wrapper и установить некоторые интеллектуальные значения по умолчанию для элемента img:
|
1 2 3 4 5 6 7 8 9 10 |
img { display: block; max-width: 100%; } .wrapper { display: grid; grid-template-columns: 1fr 5fr; grid-gap: 20px; } |
Пока что у нас отсортирован макет и настроены ссылки. Далее, давайте учтем переполнение за пределы нашей оболочки, и обеспечим, чтобы навигация и галерея были прокручиваемы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { display: grid; grid-template-columns: 1fr 5fr; grid-gap: 10px; overflow: hidden; height: 100vh; } .gallery { overflow: scroll; } .lil-nav { overflow-y: scroll; overflow-x: hidden; } |
Сейчас мы можем прокручивать каждое изображение в галерее, но если бы это был рабочий веб-сайт, мы бы наверняка хотели, чтобы люди могли немного проще прокрутить эту карусель.
Далее, давайте сосредоточимся на снимке каждого изображения в галерее. Для этого нам нужно использовать свойства scroll-snap-type и scroll-snap-align следующим образом:
|
1 2 3 4 5 6 7 8 9 |
.gallery { overflow: scroll; scroll-snap-type: x mandatory; } .gallery__img { scroll-snap-align: start; margin-bottom: 10px; } |
Теперь попробуйте снова прокрутить галерею с правой стороны:
У нас есть довольно крутая карусель! Теперь все, что нам нужно сделать, это привести в порядок дизайн, потому что изображение галереи занимают не всю высоту экрана. Для этого мы можем использовать object-fit и задать для каждого изображения min-height с помощью единиц измерения vh:
|
1 2 3 4 5 6 |
.gallery__img { scroll-snap-align: start; margin-bottom: 10px; min-height: 100vh; object-fit: cover; } |
Теперь изображения большой галереи всегда будут занимать полный размер экрана и будут масштабироваться по ширине и высоте. Давайте продолжим и займемся стилем маленьких изображений навигации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.lil-nav { overflow-y: scroll; overflow-x: hidden; } .lil-nav a { height: 200px; display: flex; margin-bottom: 10px; } .lil-nav__img { object-fit: cover; } |
Сначала я сделал эту маленькую навигацию похожей на карусель, но это было действительно странно. Сейчас просто используется поведение scroll по умолчанию. Однако в приведенной выше демонстрации попробуйте кликнуть изображение. Заметьте, как мы сразу переходим к изображению в карусели? Было бы хорошо, если бы мы могли немного анимировать этот переход — и мы можем!
|
1 2 3 4 5 |
.gallery { overflow: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; } |
Свойство CSS scroll-behavior очень удобно для этого:
Отлично, правда? Еще одна крошечная деталь, которую мы могли бы здесь изменить, это добавить фильтр к элементам навигации, чтобы они стали черно-белыми, а затем анимировать его при наведении:
|
1 2 3 4 5 6 7 8 9 10 |
.lil-nav__img { object-fit: cover; filter: saturate(0); transition: 0.3s ease all; } .lil-nav__img:hover { transform: scale(1.05); filter: saturate(1); } |
Я уверен, что мы могли бы сделать намного больше, но я думаю, что уже очень хорошо!
Мы могли бы даже добавить немного JavaScript, чтобы показать, какое изображение активно, но я считаю, что люди поймут это, просто взглянув на галерею.
Вот и все! Теперь у нас есть карусель, которая чертовски хороша для прогрессивного улучшения, и это означает, что нам не нужно загружать библиотеку JavaScript или писать больше кода, чем нам действительно нужно.
Делаем карусель адаптивной…
Давайте сделаем еще один шаг вперед и добавим адаптивные функции. Мы хотим изменить порядок сетки, переместив все текущие стили в медиа-запрос, который активируется только на больших экранах.
Возможно, вы захотите открыть эту демонстрацию в новой вкладке и уменьшить / увеличить размер окна браузера, чтобы увидеть изменения:
Если вы загрузите эту демонстрацию на мобильном устройстве, вы должны увидеть, как раскладка переключается между двумя режимами. Это делается с помощью одного медиа-запроса для элемента .wrapper. Обратите внимание, что мы используем Sass:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$large: 1200px; .wrapper { overflow: hidden; height: 100vh; display: grid; grid-template-rows: 2fr 1fr; grid-gap: 10px; @media screen and (min-width: $large) { grid-template-columns: 1fr 5fr; grid-template-rows: auto; } } |
Давайте добавим один также для навигации. Но на этот раз нам нужно указать, чтобы блок навигации размещался во втором ряду, то есть перемещается в нижнюю часть экрана:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.lil-nav { overflow-x: scroll; overflow-y: hidden; display: flex; grid-row-start: 2; @media screen and (min-width: $large) { overflow-y: scroll; overflow-x: hidden; display: block; grid-row-start: auto; } } |
Нам также нужно переключить scroll-type для больших экранов и поменять свойство overflow:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.gallery { overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; display: flex; @media screen and (min-width: $large) { display: block; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; } } |
Это основная часть изменений, которые мы должны сделать, и мне теперь все очень нравится! Если бы мы хотели сделать галерею готовой к производству, мы бы подумали о доступности (например, мы, вероятно, не хотим, чтобы программы чтения с экрана считывали все изображения как в блоке навигации, так и в галерее). Кроме того, есть аспект производительности — мы могли бы рассмотреть отложенную загрузку, чтобы изображения отображались только тогда, когда они необходимы. В любом случае, это хорошее начало!
Автор: Robin Rendle
Источник: //css-tricks.com
Редакция: Команда webformyself.
