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

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

Привет, меня зовут Стивен.

В этом эпизоде ​​мы попробуем использовать только HTML и CSS для достижения основного эффекта карусели.Конечно, будут некоторые недостающие функции, такие как невозможность автоматического прыжка, но давайте посмотрим, чего мы можем добиться с помощью CSS.

Видеоверсия этого урока находится по адресувоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооДобро пожаловать три подряд внимание!

часть HTML

Откройте редактор CodePen, сначала создайте структуру HTML, я буду использовать карусель<ul>делать, присоединяться<ul>метка, классslides. добавить три<li>метка, классslide, триslideЗаполните 1, 2 и 3 соответственно.

Разделы CSS

Затем перейдите в раздел CSS и добавьтеbodyСелектор, который центрирует содержимое страницы, можно добавить, добавивdisplay: flex,justify-contentа такжеalign-itemsустановить какcenter,min-heightустановить как100vhдостигать.

тогда присоединяйтесьul.slidesселектор, чтобы установить стиль контейнера карусели,positionустановить какrelative, ширина установлена ​​на600px, высота установлена ​​на280px. Затем отмените свойства исходного списка,list-styleустановить какnone.marginа такжеpaddingустановить как0, а затем добавьте светло-серый фон, чтобы было легче увидеть его размер.

воссоединитьсяli.slide, задать стиль одиночной карусели,marginа такжеpaddingустановить как0, ширина и высота наследуют размер родительского контейнера, установленного наinherit,Потомpositionустановить какabsolute.

topа такжеleftустановить как0, теперь вы можете видеть, что эти три числа перекрываются.

Добавьте три селектора, чтобы установить цвета фона трех каруселей соответственно..slide:nth-of-type(1),2а также3, установите первыйslideЦвет фона желтый#F2E205, второй оранжево-красный#F25C05, третий синий#495F8C.

Снова отрегулируйте их положение.Вторая картинка справа от первой.В настройках второй картинки добавьтеleft: 100%,добавьте в настройках третью картинкуleft: 200%, и теперь вы можете видеть, что три изображения расположены рядом по горизонтали.

назад.slideНастройки стиля селектора, добавитьdisplay: flex,justify-contentа такжеalign-itemsустановить какcenter, затем увеличьте шрифт и установите цвет,font-familyустановить какHelvetica, установлен размер текста120px, установлен белый цвет.

опять такиslidesселектор присоединитьсяoverflow: hiddenВы можете скрыть выделенные вторую и третью карусели.

Реализовать карусельное переключение

Теперь, когда стиль задан, следующим шагом будет добавление кнопки для переключения изображения карусели. Может использоваться с элементами формыradioКнопки доступны с помощью селекторов CSS.

Вернемся к части HTML, в<li>добавить три перед меткойradioкнопка, определяемая отдельноidдляcontrol-1,control-2а такжеcontrol-3, мы пройдем<label>сослаться на него. Затем определить тот жеname, чтобы их можно было сгруппировать в один и тот же набор кнопок, первыйradioплюс кнопкаchecked, он выбран по умолчанию.

В настоящее времяradioКнопка закрыта тремя карусельными изображениями, временно добавленными в CSS.input[type="radio"]селектор, наборposition: relativeа такжеz-index: 100это будет видноradioкнопку, чтобы мы могли понять следующую часть.

Под тремя каруселями добавьте<div>, классcontrols-visible, добавив три<label>Этикетка,<label>изforсвойство, указанное какradioКнопкаid, соответственноcontrol-1,control-2а такжеcontrol-3.

Затем мы поместим эти три<label>Настройте стиль точки с помощью CSS и добавьте его в часть CSS..controls-visibleа также.controls-visible labelСелектор, сначала установите стиль контейнера, установитеposition: absolute, ширина100%,настраиватьbottomСнизу12px,Потомtext-alignустановить какcenter.

опять такиlabelнастройки стиля, добавитьdisplay: inline-block, ширина и высота установлены на10px, цвет фона установлен на белый, а закругленные углы установлены на50%, он становится кругом. потомmarginустановить и опустить0,о3pxи, наконец, добавьте белую рамкуborder: 2px solid #fff.

Теперь попробуйте нажать триlabel, убедитесь, что ими можно управлять в соответствии сradioкнопка:

Тогда нужно решить две проблемы:

  • Во-первых, настроить нажатыйlabelстиль, отображается как выбранный
  • Второй - переключить карту карусели

Всего этого можно добиться с помощью селекторов CSS.

Давайте сначала посмотрим на структуру HTML, триradioКнопка находится сверху, этот порядок очень важен, поэтому мы хотимradioнаписано на нем,labelНапишите это внизу, а затем контролируйте верхradio, потому что можно пройтиradio:checkedсудить об избранныхradioкнопку, а затем через~Тильда находит элемент после него на том же уровне.

И из-за CSSВы можете найти элементы в том же слое только после этого, а не элементы в том же слое до,такradioКнопка написана сверху.

присоединиться первым.slides input[type="radio"]:nth-of-type(1):checked, судя по тому, когда первыйradioкнопка выбрана, присоединиться~тильда, найдя его на том же уровне,.controls-visibleвнутриlabel:nth-of-type(1)Выберите первыйlabel,настраиватьbackground-colorОн темно-серый. Теперь вы можете увидеть первый щелчокlabelотображается как выбранный стиль:

Затем скопируйте этот параметр и установите второй и третийlabel,такlabelНастройка стиля завершена.

Наконец, установите эффект переключения изображений карусели, добавьте.slides input[type="radio"]:nth-of-type(1):checked,~тильда.slide. Это означает, что при выборе первогоradioПосле кнопки следующие три.slideстиль. Поскольку мы уже поставили триslideРасположен горизонтально, поэтому нужно только адаптироватьradioкнопка, поместите триslideПросто переместитесь на определенное расстояние влево.

  • когда первыйradioкнопка,transformустановить какtranslatex(0%).
  • когда выбран второйradioкнопка,transformустановить какtranslatex(-100%), то есть удвоить ширину влево, и можно отобразить вторую карусель.
  • когда третийradioкнопка,translatex()установить как-200%,Это оно.

затем обратно в.slideСелектор, добавление настроек анимированного переходаtransition: .5s transform ease-in-out, и воляradioкнопкаdisplayустановить какnoneскрыть.

Давайте посмотрим на завершенный эффект этого случая

Что ж, это карусель, сделанная на чистом CSS. Вы обнаружите, что в ней нет кнопок для прыжка влево и вправо. Эта часть оставлена ​​для вас, чтобы попробовать. Принцип и следующие триlabelПодход аналогичен.

Ответ здесь, вы можете обратиться к:код спрей.IO/стивен класс/боюсь...

Что касается того, почему нет функции автоматического прыжка, здесь следует использовать JavaScript, хотя с использованием@keyframesМожно выполнять прыжки на время, но нельзя совмещать с ручными прыжками. Если вы найдете другие способы сделать это, пожалуйста, оставьте сообщение для обмена.

Все вышесказанное касается реализации эффекта карусели с помощью CSS.

Исходный код для этого случая находится накод спрей.IO/стивен класс/боюсь...

Ваша поддержка-моя мотивация, пожалуйста, обратите вниманиеМинимальный класс CodingStartup, давайте работать вместе!

Категории