Это просто работает
На моем пути к тому, чтобы стать веб-разработчиком полного стека, я начал клонировать домашнюю страницу Plasso как свой первый настоящий проект. Несмотря на то, что я думал, что слайдер - это «детская штука», я опубликовал в Instagram историю, в которой он был показан. Упомянув, что я не использовал ничего, кроме HTML и CSS, несколько человек спросили, как они могут это сделать. Тогда я понял, что это может показаться задачей для новичков, но многие люди все равно могут извлечь пользу из чтения кода, а новички могут извлечь выгоду из пошагового руководства.
Давайте начнем
Во-первых, чтобы все было организовано и семантично, все, что связано с слайдером, содержится в section.slider в строке 1. Он содержит фоны, слайды и нумерацию страниц.
Разметка фонов
Вы не можете использовать transition на фоне, содержащем градиент. Например, это не сработает:
.a-div background: linear-gradient(red, blue 50%).a-div:hover background: linear-gradient(blue, red 50%)
Однако это будет:
.a-div background-color: blue.a-div:hover background-color: red
По этой причине нам нужен фон для каждого слайдера. К этому можно было подойти тремя способами:
- Используйте
linear-gradient(), чтобы создать сплошной цветовой блок, градиент, другой сплошной цветовой блок, затемskewY(). - Создайте два фона для каждого слайда, один из сплошного блока цвета, другой - с градиентом. Примените
skewY()к обоим. - То же, что и номер два, но вместо
skewY()используйтеpolygon().
Для всех трех решений нам нужно применить постепенное исчезновение transition на opacity, применяя постепенное уменьшение transition к фону входящих слайдов. Это дает дополнительное преимущество, заключающееся в улучшении характеристик за счет отказа от процесса покраски.
Первое решение ниже создает неровные края, для которых я не смог найти решения.
Остались решения два и три. Я выбрал третье решение, исходя из моих собственных предпочтений.
Стиль фона
Мы хотим, чтобы все .slider__backgrounds классы располагались одинаково. Если бы мы не позиционировали .slider, нам нужно было бы relative позиционировать все .slider__background div, а затем использовать top: -100% для второго .slider__backgrounds, затем top: -200% для следующего и так далее. Использование absolute позволяет избежать лишних строк кода и разместить фон именно там, где он нам нужен, с помощью одной строки кода.
Поскольку все блоки div пусты (с точки зрения HTML-элементов), а все .slider__background div останутся пустыми, для придания им некоторой жизни добавляются высота и ширина.
Чтобы получить необходимую форму для .slider__backgrounds__bottom и .slider__backgrounds__top, используется polygon() из третьего решения.
Классы-модификаторы для .backgrounds__slider__bottom и .backgrounds__slider__top удобны для простого применения различных фонов, а также для облегчения чтения и понимания CSS.
Разметка и макет слайдов
Поскольку все блоки выше .slider__slides расположены absolute, он располагается именно там, где нам нужно. Это потому, что вышеупомянутые div взяты из обычного потока.
Используя display: grid, основная структура каждого слайда состоит из двух строк. Это вызывает переполнение, так как .slider__slides теперь имеет макет из трех столбцов, общая ширина которых составляет 300%. Если вы примените overflow: hidden к .slider__slides, это почти решит проблему. Переполнения не будет, но тень на .slider__slides_slide будет обрезана сверху. Решением было добавить overflow: hidden к родительскому div .slider__slides, которым в данном случае является body.
Я использовал will-change, чтобы добиться более плавной частоты кадров.
Свойство
will-changeCSS позволяет авторам подсказывать браузерам, какие изменения следует ожидать в элементе, чтобы браузер мог заранее настроить соответствующие оптимизации до того, как элемент будет фактически изменен. Такого рода оптимизации могут повысить скорость отклика страницы за счет выполнения потенциально дорогостоящей работы заранее, до того, как она действительно понадобится. - MDN
Заставить все работать
Разбивка на страницы, метки и входы
Это момент, которого вы так ждали. Так как же он на самом деле скользит по щелчку?
Разделы пагинации на самом деле являются ярлыками, которые связаны с радио-входами. Таким образом, когда вы щелкаете по метке, выбирается соответствующий радиовход, а остальные отменяются. Это позволяет избежать написания логики JavaScript, чтобы увидеть, какой слайд активен в данный момент, удаления класса «активация», затем просмотра того, какой слайд выбрал пользователь, и «активации» его.
Другая половина - это использование :checked. Мы все знакомы с :hover, это одно и то же понятие. Когда условие истинно, применяется CSS. Однако есть один нюанс. Вам необходимо использовать общий, дочерний или смежный комбинатор. Если убрать ~, ползунок вообще не будет работать.
После этого нужно просто добавить переходы, и все готово.
Вот код, если вы хотите увидеть весь код.
Заключение
Это так просто. Я сижу здесь и думаю: «Неужели это действительно заслуживает целой статьи? Это вообще полезно? ». Оставьте комментарий и дайте мне знать. То же самое касается и вопросов.
