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

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

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

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

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

1234<div class=”wrapper”>  <nav class=”lil-nav”></nav>  <div class=”gallery”></div></div>

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

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

123456789<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 каждой из этих ссылок указывает на идентификатор? Это потому, что если мы снова посмотрим демонстрацию, то увидим, что нам нужно иметь возможность кликнуть изображение, а затем мы хотим, чтобы в галерее справа отобразилась увеличенная версия.

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

12345<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:

READ
Дата выхода и что нового в Bootstrap 5

CSS

12345678910img {  display: block;  max-width: 100%;} .wrapper {  display: grid;  grid-template-columns: 1fr 5fr;  grid-gap: 20px;}

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

CSS

12345678910111213141516.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 следующим образом:

CSS

123456789.gallery {  overflow: scroll;  scroll-snap-type: x mandatory;} .gallery__img {  scroll-snap-align: start;  margin-bottom: 10px;}

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

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

CSS

123456.gallery__img {  scroll-snap-align: start;  margin-bottom: 10px;  min-height: 100vh;  object-fit: cover;}

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

CSS

READ
Модульная структура в проекте с использованием фреймворка Laravel. Часть 1
1234567891011121314.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 по умолчанию. Однако в приведенной выше демонстрации попробуйте кликнуть изображение. Заметьте, как мы сразу переходим к изображению в карусели? Было бы хорошо, если бы мы могли немного анимировать этот переход — и мы можем!

CSS

12345.gallery {  overflow: scroll;  scroll-snap-type: x mandatory;  scroll-behavior: smooth;}

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

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

CSS

12345678910.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:

READ
Реактивное (react) гамбургер-меню

CSS

1234567891011121314$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;  }}

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

CSS

12345678910111213.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:

CSS

1234567891011121314.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

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий