Css вертикальный слайдер: Делаем вертикальный слайдер для сайта

Совместимость с браузером и решения для полифилов

Диапазон ввод поддерживается во всех современных браузерах: все версии Chrome, Safari и Opera; iOS 5+, IE 10+, Firefox 23 и выше.

Чтобы заставить его работать в старых браузерах, как правило, нужно применить правильный полифилл: html5slider от Фрэнка Яна очень хорошо работает для Firefox, а rangelider хорошо работает во всех браузерах как полифилл, если вы используете JQuery, и доступно гораздо больше опций. .

Фотография Питера Ма, использована с разрешения.

Нравится? Я приглашаю вас подписаться на меня на twitter.com/dudleystorey, чтобы узнать больше.

10 Вертикальных каруселей CSS | FrontBackend

Карусель - это слайд-шоу, в котором содержимое отображается циклически.Карусели бывают вертикальные и горизонтальные. Основное место для такого компонента - это верх страницы, где он также работает как рекламный баннер. В этой коллекции мы представляем лучших бесплатных вертикальных каруселей . Надеемся, вам понравится.

Вертикальная / горизонтальная карусель

Сделано simon 24 ЯНВАРЯ 2019 ГОДА

демонстрация и код

CSS вертикальная карусельная анимация

Сделано Aija 3 августа 2019 г.

демонстрация и код

Вертикальная карусель

Сделано Сабиной Робарт 15 ДЕКАБРЯ 2018 г.

демонстрация и код

Вертикальная карусель

Сделано Максимом Прео 31 МАРТА 2018

демонстрация и код

jQuery Вертикальная карусель

Сделано Борисом Иглесиасом 12 АПРЕЛЯ 2013

демонстрация и код

Вертикальный слайдер Bootstrap 3 Carousel

Сделано Moon Theme 18 МАРТА 2015

демонстрация и код

Карусель многонаправленной электронной почты

Сделано Гэри Весоловски 13 апреля 2018 г.

демонстрация и код

Вертикальная карусель с TweenMax.js

Сделано Данилом Гончаренко 15 августа 2017 г.

демонстрация и код

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

Сделано Olivier PASCAL 19 мая 2015 г.

демонстрация и код

Вертикальная карусель React

Сделано Алексом Боффи 5 сентября 2016 г.

демонстрация и код

Скользящий кошмар: понимание диапазона ввода

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

Просмотр диапазона ввода

Прежде всего, нам нужно убедиться, что браузер предоставляет DOM внутри входного диапазона.

В Chrome мы вызываем DevTools, переходим в Settings , Preferences , Elements и проверяем, что опция Show user agent shadow DOM включена.

Последовательность снимков экрана Chrome, иллюстрирующих шаги, указанные выше.

В Firefox мы переходим к about: config и убеждаемся, что для флага devtools.inspector.showAllAnonymousContent установлено значение true .

Последовательность снимков экрана Firefox, иллюстрирующих шаги, указанные выше.

В течение очень долгого времени я был убежден, что Edge не дает возможности увидеть, что находится внутри таких элементов. Но пока я возился с этим, я обнаружил, что там, где есть воля и (и немного удачи), есть выход! Нам нужно вызвать DevTools, затем перейти к диапазону input , который мы хотим проверить, щелкните его правой кнопкой мыши, выберите Inspect Element и бац, панель DOM Explorer теперь показывает структуру нашего слайдера!

Последовательность скриншотов Edge, иллюстрирующих шаги сверху.

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

Структура внутри

С самого начала мы видим источник потенциальных проблем: у нас внутри очень разные звери для каждого браузера.

В Chrome, наверху теневого DOM, у нас есть div , к которому мы больше не можем получить доступ. Раньше это было возможно, когда поддерживалось / deep / , но тогда способность пробивать теневой барьер считалась ошибкой, поэтому то, что раньше было полезной функцией, было отброшено.Внутри этого div у нас есть еще один для дорожки, а внутри дорожки div у нас есть третий div для большого пальца. Эти два последних явно помечены атрибутом id , но еще одна вещь, которую я нахожу странной, заключается в том, что, хотя мы можем получить доступ к дорожке с помощью :: - webkit-slider-runnable-track , а ползунок с помощью :: - webkit-slider-thumb , только дорожка div имеет псевдо-атрибут с этим значением.

Внутренняя структура в Chrome.

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

Внутренняя структура в Firefox.

Мы можем получить доступ к дорожке (первый div ) с помощью :: - moz-range-track , прогресс (второй div ) с помощью :: - moz-range-progress и большой палец (последний div ) с :: - moz-range-thumb .

Структура в Edge намного сложнее, что в некоторой степени позволяет в большей степени управлять стилем слайдера. Однако мы можем получить доступ только к элементам с идентификаторами с префиксом -ms- , что означает, что есть также много элементов, к которым мы не можем получить доступ, со встроенными стилями, которые нам часто нужно менять, например, overflow: hidden on элементы между фактическим вводом и его дорожкой или переходом на родительском элементе ползунка.

Внутренняя структура в Edge.

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

Мы всегда должны стремиться свести количество отдельных стилей к минимуму, но иногда это просто невозможно, поскольку установка одного и того же стиля может дать очень разные результаты из-за наличия разных структур.Например, установка таких свойств, как непрозрачность , или , фильтр или даже , преобразование на дорожке, также повлияет на ползунок в Chrome и Edge (где это дочерний / потомок дорожки), но не в Firefox (где он его брат).

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

  ввод :: - webkit-slider-runnable-track,
input :: - moz-range-track,
input :: - ms-track {/ * общие стили * /}  

Чтобы он работал, нам нужно было написать его так:

  input :: - webkit-slider-runnable-track {/ * общие стили * /}
input :: - moz-range-track {/ * общие стили * /}
input :: - ms-track {/ * общие стили * /}  

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

  @mixin track () {/ * общие стили * /}

Вход {
  & :: - webkit-slider-runnable-track {@include track}
  & :: - moz-range-track {@include track}
  & :: - ms-track {@include track}
}  

Обратите внимание, что здесь я использую Sass, но вы можете использовать любой другой препроцессор.Все, что вы предпочитаете, хорошо, если оно избегает повторения и упрощает сопровождение кода.

Начальные стили

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

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

Браузеры

WebKit и Edge (потому что, да, Edge также применяет много префиксов WebKit) также имеют два уровня значений по умолчанию для определенных свойств (например, тех, которые связаны с размерами, границами и фоном), если мы можем их так назвать - перед установкой -webkit-appearance: none (без которого стили, которые мы установили, не будут работать в этих браузерах) и после его установки. Однако после установки -webkit-appearance: none основное внимание будет уделяться значениям по умолчанию, потому что в браузерах WebKit мы не можем стилизовать ввод диапазона, не установив это, и вся причина, по которой мы проходим все это, заключается в том, чтобы понять как мы можем облегчить себе жизнь, создавая слайдеры.

Обратите внимание, что установка -webkit-appearance: none в диапазоне input и на большом пальце (дорожка по какой-то причине уже установлена ​​по умолчанию) приводит к тому, что ползунок полностью исчезает как в Chrome, так и в Edge. Почему это происходит, мы обсудим чуть позже в этой статье.

Элемент ввода фактического диапазона

Первое свойство, которое я задумал проверить, box-sizing , оказывается, имеет одинаковое значение во всех браузерах - content-box .Мы можем убедиться в этом, просмотрев свойство размера блока на вкладке Computed в DevTools.

Размер окна из диапазона вводит , сравнительный анализ всех трех браузеров (сверху вниз: Chrome, Firefox, Edge).

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

По умолчанию поле составляет 2px, в Chrome и Edge и 0 .7em в Firefox.

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

Однако Chrome показывает нам, как были установлены стили браузера (правила таблицы стилей пользовательского агента устанавливаются на сером фоне). Иногда вычисленные значения, которые мы получаем, не были явно установлены, так что это бесполезно, но в этом конкретном случае мы видим, что поле , поле действительно было установлено как значение пикселей .

Отслеживание стилей браузера в Chrome, случай margin .

Firefox также позволяет нам отслеживать источник стилей браузера в некоторых случаях, как показано на скриншоте ниже:

Отслеживание стилей браузера в Firefox и то, как это не удается для поля из нашего диапазона input .

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

1. При изменении размера шрифта на входе или html , что влечет за собой установку значения em или rem .
2. При изменении области просмотра, который указывает, что значение было установлено с использованием значений % или единиц области просмотра. Однако во многих случаях это, вероятно, можно безопасно пропустить.

Изменение размера шрифта диапазона input в Firefox также изменяет его значение поля .

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

Изменение font-size диапазона input в Edge не изменяет его значение поля .

В любом случае, все это означает, что margin - это свойство, которое нам нужно явно установить во входных данных [type = 'range'] , если мы хотим добиться единообразия во всех браузерах.

Так как мы упомянули размер шрифта , давайте проверим и это. Конечно, это тоже непоследовательно.

Во-первых, у нас есть 13.3333px в Chrome, и, несмотря на десятичные дроби, которые могут указывать на то, что это результат вычисления, в котором мы разделили число на кратное 3 , похоже, он был установлен как таковой и не зависит от размеров области просмотра или на родительском или корневом font-size .

Размер шрифта из диапазона вводит в Chrome.

Firefox показывает нам то же вычисленное значение, за исключением того, что, похоже, это происходит из-за установки сокращения font на -moz-field , что меня сначала очень смутило, особенно с учетом того, что background-color установлен на -moz -Field , которое должно быть таким же, поскольку ключевые слова CSS нечувствительны к регистру.Но если они одинаковы, то как это может быть допустимым значением для обоих свойств? По-видимому, это ключевое слово является своего рода псевдонимом для того, чтобы вводные данные выглядели так, как выглядят любые вводимые данные в текущей ОС.

Размер шрифта из диапазона вводит в Firefox.

Наконец, Edge дает нам 16px для своего вычисленного значения, и это, похоже, либо унаследовано от его родителя, либо установлено как 1em , как показано в записи ниже:

Размер шрифта диапазона вводит в Edge.

Это важно, потому что мы часто хотим установить размеры ползунков и элементов управления (и их компонентов) в целом с использованием единиц em , чтобы их размер относительно текста на странице оставался неизменным - они не выглядели слишком маленький, когда мы увеличиваем размер текста, или слишком большой, когда мы уменьшаем размер текста. И если мы собираемся установить размеры в единицах em , то наличие заметной разницы между размером шрифта между браузерами приведет к тому, что наш диапазон input будет меньше в одних браузерах и больше в других.

По этой причине я всегда стараюсь явно установить размер шрифта на фактическом слайдере. Или я мог бы установить сокращение font , даже если другие свойства шрифта здесь не имеют значения. Возможно, они появятся в будущем, но об этом позже, когда мы будем обсуждать метки и метки.

Прежде чем мы перейдем к границам, давайте сначала рассмотрим свойство color . В Chrome это rgb (196,196,196) (установлено как таковое), что делает его немного легче, чем silver ( rgb (192,192,192) / # c0c0c0 ), тогда как в Edge и Firefox вычисленное значение составляет rgb (0,0,0) (который твердый черный ).У нас нет возможности узнать, как это значение было установлено в Edge, но в Firefox оно было установлено с помощью другого аналогичного ключевого слова -moz-fieldtext .

Цвет диапазона вход , сравнительный анализ всех трех браузеров (сверху вниз: Chrome, Firefox, Edge).

Граница установлена ​​на начальный в Chrome, что эквивалентно none medium currentcolor (значения для border-style , border-width и border-color ).Насколько толстая граница medium в точности зависит от браузера, хотя везде она не меньше толщины тонкой рамки . В частности, в Chrome вычисленное значение, которое мы получаем здесь, составляет 0 .

Граница диапазона вводит в Chrome.

В Firefox у нас также есть значение none medium currentcolor , установленное для границы , хотя здесь medium кажется эквивалентным 0.566667px , значению, которое не зависит от элемента или корневого шрифта -размер или по размерам видового экрана.

Граница диапазона вводит в Firefox.

Мы не можем видеть, как все было установлено в Edge, но вычисленные значения для border-style и border-width равны none и 0 соответственно. Цвет границы изменяется, когда мы меняем свойство color , что означает, что, как и в других браузерах, для него установлено значение currentcolor .

Граница диапазона вводит в Edge.

Набивка - это 0 в Chrome и Edge.

padding диапазона input , сравнительный взгляд на Chrome (вверху) и Edge (внизу).

Однако, если мы хотим получить идеальный по пикселям результат, нам нужно указать его явно, потому что в Firefox он установлен на 1px .

Заполнение диапазона вводит в Firefox.

Теперь давайте сделаем еще один крюк и проверим фон, прежде чем мы попытаемся разобраться в значениях размеров.Здесь мы получаем, что вычисленное значение: transparent / rgba (0, 0, 0, 0) в Edge и Firefox, но rgb (255,255,255) (сплошной белый ) в Chrome.

background-color диапазона input , сравнительный анализ всех трех браузеров (сверху вниз: Chrome, Firefox, Edge).

И… наконец, давайте посмотрим на размеры. Я оставил это напоследок, потому что здесь все становится действительно запутанным.

Chrome и Edge дают нам 129px для вычисленного значения ширины .В отличие от предыдущих свойств, мы не видим, чтобы это было установлено где-либо в Chrome, что обычно заставляет меня поверить, что это что-то, что зависит либо от родителя, растягиваясь по горизонтали, чтобы соответствовать, как это делают все элементы блока (что определенно не случай здесь) или на детей. Существует также свойство -webkit-logic-width , принимающее то же значение 129px на панели Computed. Сначала меня это немного смутило, но оказалось, что это относительный эквивалент режима письма - другими словами, это ширина , для горизонтального режима письма и высота , для вертикального режима письма.

Изменение font-size диапазона input в Chrome не изменяет его значение width .

В любом случае, это не зависит от размера шрифта самого входа или корневого элемента, ни от размеров области просмотра в любом браузере.

Изменение font-size диапазона input в Edge не изменяет его значение width .

Firefox здесь необычный, он возвращает вычисленное значение 160px для ширины по умолчанию .Это вычисленное значение, однако, зависит от font-size диапазона input - похоже, это 12em .

Изменение font-size диапазона input в Firefox также изменяет его значение width .

В случае высоты Chrome и Edge снова соглашаются, давая нам вычисленное значение 21px . Как и для ширины , я не вижу, чтобы это было установлено где-либо в таблице стилей пользовательского агента в Chrome DevTools, что обычно происходит, когда высота элемента зависит от его содержимого.

Изменение font-size диапазона input в Chrome не меняет его значение height .

Это значение также не зависит от размера шрифта в любом браузере.

Изменение font-size диапазона input в Edge не изменяет его значение height .

Firefox снова отличается, давая нам 17.3333px в качестве вычисленного значения и, опять же, это зависит от input ‘s font-size - это 1.3em .

Изменение font-size диапазона input в Firefox также изменяет его значение height .

Но это же не хуже, чем случай margin , верно? Что ж, пока это не так! Но это скоро изменится, потому что мы переходим к компоненту отслеживания.

Компонент гусеницы диапазона

Есть еще одна возможность, касающаяся фактических измерений input , которую мы еще не рассмотрели: на них влияют параметры его компонентов.Итак, давайте явно установим некоторые размеры на дорожке и посмотрим, влияет ли это на размер ползунка.

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

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

Явная установка ширины на дорожке изменяет ширину дорожки в Firefox, но не ширину родительского ползунка.

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

Изменение ширины дорожки ничего не делает в Chrome (вычисленное значение остается 129px ).

Что касается безумных способов, то использование transform: scaleX (factor) кажется единственным способом сделать дорожку шире или уже, чем ее родительский ползунок. Обратите внимание, что это также вызывает немало побочных эффектов. Ползунок также масштабируется по горизонтали, и его движение ограничивается уменьшенной дорожкой в ​​Chrome и Edge (поскольку большой палец является дочерним элементом дорожки в этих браузерах), но не в Firefox, где его размер сохраняется, а его движение все еще ограничен вводом, а не уменьшенной дорожкой (поскольку дорожка и ползунок здесь являются братьями и сестрами).Любые боковые отступы , граница или поле на дорожке также будут масштабированы.

Переходя к Edge, дорожка снова принимает любую установленную нами ширину .

Edge также позволяет установить ширину дорожки , которая отличается от ширины родительского слайдера.

Однако это не та же ситуация, что и в Firefox. Хотя установка ширины на больше, чем у родительского ползунка на дорожке, заставляет его расширяться наружу, два не выровнены по центру.Вместо этого левая граница дорожки выравнивается по левому краю с левой границей содержимого ее диапазона input parent. Это несоответствие выравнивания само по себе не было бы большой проблемой - margin-left , установленный только на :: - ms-track , может это исправить.

Однако все, что находится за пределами поля содержимого родительского слайдера , вырезано в Edge. Это не эквивалентно тому, что overflow установлен на , скрытый на фактическом входе , который вырезал бы все за пределами поля padding-box , а не content-box .Следовательно, это не может быть исправлено установкой overflow: visible на ползунке.

Это ограничение вызвано элементами между входом и дорожкой, имеющей overflow: hidden , но, поскольку мы не можем получить к ним доступ, мы также не можем решить эту проблему. Настройка всего так, чтобы ни один компонент (включая его box-shadow ) не выходил за пределы content-box диапазона, является вариантом в некоторых случаях, но не всегда.

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

Явная установка высоты на дорожке изменяет высоту дорожки в Firefox, но не родительского ползунка.

Значение по умолчанию для этой высоты без стилей, установленных на фактическом входе или дорожке, составляет . 2em .

Изменение размера шрифта на дорожке изменяет его вычисленную высоту в Firefox.

В отличие от ширины , Chrome позволяет дорожке принимать высоту , которую мы установили, и, если мы не используем здесь значение % , он также делает content-box родительского ползунок расширяется или сжимается так, чтобы граница и рамка дорожки идеально вписывались в него. При использовании значения % фактический ползунок и дорожка выровнены по центру по вертикали.

Явная установка высоты на дорожке в % изменяет высоту дорожки в Chrome, но не родительского ползунка.При использовании других единиц фактический диапазон input расширяется или сжимается по вертикали, так что дорожка идеально помещается внутри.

Вычисленное значение, которое мы получаем для высоты без установки каких-либо пользовательских стилей, такое же, как и для ползунка, и не меняется с размером шрифта .

Изменение размера шрифта на дорожке не меняет его вычисленную высоту в Chrome.

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

Явная установка высоты на дорожке в Edge не изменяет высоту родительского ползунка, и они выровнены по центру. Однако высота дорожки ограничена фактическим входным .

Начальная высота дорожки - 11 пикселей, , и это значение не зависит от размера шрифта или области просмотра.

Изменение размера шрифта на дорожке не меняет его вычисленную высоту в Edge.

Переходя к чему-то менее сложному, у нас есть размера коробки . Это border-box в Chrome и content-box в Edge и Firefox, поэтому, если мы собираемся иметь ненулевую границу или заполнение , то box-sizing - это свойство, которое мы необходимо явно установить, чтобы уравновесить ситуацию.

: размер окна трека, сравнительный анализ всех трех браузеров (сверху вниз: Chrome, Firefox, Edge).

Дорожка по умолчанию margin и padding - оба 0 во всех трех браузерах - наконец, оазис согласованности!

: размер окна трека, сравнительный анализ всех трех браузеров (сверху вниз: Chrome, Firefox, Edge).

Значения свойства color могут быть унаследованы от родительского ползунка во всех трех браузерах.

цвет трека, сравнительный взгляд на Chrome (вверху) и Firefox (внизу).

Тем не менее, Edge здесь является нечетным, меняя его на , белый, , хотя установка его на , начальное значение меняет его на , черный , что является значением, которое мы имеем для фактического ввода .

Сброс цвета на начальный в Edge.

Установка -webkit-appearance: none на фактическом входе в Edge делает вычисленное значение цвета на дорожке прозрачным (если мы сами явно не установили значение цвета ). Кроме того, как только мы добавляем на дорожку фон , цвет вычисленной дорожки внезапно меняется на черный .

Неожиданное последствие добавления фонового трека в Edge.

В определенной степени возможность наследования свойства color полезна для создания тем, хотя наследование настраиваемых свойств может сделать здесь гораздо больше.Например, предположим, что мы хотим использовать серебро для второстепенных вещей и апельсин для того, что мы хотим выделить. Мы можем определить две переменные CSS в теле, а затем использовать их на странице, даже внутри нашего входного диапазона.

  кузов {
  - затухание: #bbb;
  - удар: # f90
}

h3 {border-bottom: solid .125em var (- impact)}

h6 {color: var (- затухание)}

[type = 'range']: focus {box-shadow: 0 0 2px var (- impact)}

@mixin track () {background: var (- fading)}

@mixin thumb () {background: var (- impact)}  

К сожалению, хотя это работает в Chrome и Firefox, Edge в настоящее время не позволяет наследовать настраиваемые свойства в диапазоне input до его компонентов.

Ожидаемый результат (слева) по сравнению с результатом в Edge (справа), где не отображается ни дорожка, ни ползунок (живая демонстрация).

По умолчанию на дорожке в Chrome или Firefox нет границы (ширина границы , - 0, и стиль границы , - , нет ).

Граница , граница трека, сравнительный взгляд на Chrome (вверху) и Firefox (внизу).

Edge не имеет границы на дорожке, если у нас нет фона , установленного на фактическом входе, и нет фона , установленного на самой дорожке.Однако, как только это изменится, мы получим тонкую ( 1px ) черную дорожку границу .

Еще одно неожиданное последствие добавления дорожки или родительского слайдера , фона в Edge.

Показано, что цвет фона по умолчанию наследуется как белый, но затем каким-то образом мы получаем вычисленное значение rgba (0,0,0,0) ( прозрачный ) в Chrome (как до, так и после ). -webkit-appearance: нет ). Это также заставляет меня задаться вопросом, почему мы можем видеть дорожку раньше, если нет background-color или background-image , чтобы дать нам что-нибудь видимое.Firefox дает нам вычисленное значение rgb (153,153,153) ( # 999 ) и Edge transparent (хотя мы могли бы сначала подумать, что это какое-то серебро, это не фон из :: - Элемент ms-track - подробнее об этом чуть позже).

Цвет фона дорожки, сравнительный взгляд на все три браузера (сверху вниз: Chrome, Firefox, Edge).

Компонент ползунка диапазона

Готовы к самой досадной нестыковке? Ползунок перемещается в пределах поля содержимого дорожки в Chrome и в пределах фактического поля содержимого ввода содержимого в Firefox и Edge, даже когда мы делаем дорожку длиннее или короче, чем input (Chrome не позволяет этого, заставляя поле border-box дорожки соответствовать по горизонтали ползунку content-box ползунка).

Принцип работы Chrome показан ниже:

Запись движения большого пальца в Chrome от одного конца ползунка до другого.

Заполнение прозрачное, в то время как поле содержимого и граница полупрозрачны. Мы использовали оранжевый для фактического слайдера, красный для дорожки и фиолетовый для большого пальца.

Для Firefox все немного иначе:

Запись движения большого пальца в Firefox от одного конца ползунка до другого (три случая сверху вниз: граница , граница, дорожки, идеально подходит для поля содержимого ползунка по горизонтали, она длиннее и это короче).

В Chrome большой палец является дочерним элементом дорожки, а в Firefox - его родным братом, поэтому, глядя на это с этой точки зрения, имеет смысл, что Chrome будет перемещать большой палец в пределах поля содержимого дорожки и Firefox. переместит его в пределах поля содержимого ползунка . Однако ползунок также находится внутри дорожки в Edge, и он все еще перемещается в пределах поля содержимого ползунка .

Запись движения большого пальца в Edge от одного конца ползунка до другого (три случая сверху вниз: рамка , граница, дорожки, идеально подходит для поля содержимого, ползунка по горизонтали, она длиннее и это короче).

Хотя сначала это выглядит очень странно, это связано с тем, что Edge устанавливает для позиции дорожки значение static , и мы не можем изменить это, даже если установим его на относительно с ! Important .

Попытка (и неудача) изменить значение свойства position на дорожке в Edge.

Это означает, что мы можем стилизовать наш слайдер точно так же для всех браузеров, но если его content-box не совпадает с его дорожкой по горизонтали (так, если у нас есть ненулевой боковой отступ или граница ) на треке), он не будет двигаться в одних и тех же пределах во всех браузерах.

Кроме того, если мы масштабируем дорожку по горизонтали, тогда Chrome и Firefox будут вести себя так же, как и раньше, ползунок перемещается в пределах поля содержимого теперь масштабированной дорожки в Chrome и в пределах фактических входных . content-box в Firefox. Однако Edge заставляет большой палец перемещаться в пределах интервала, ширина которого равна ширине рамки дорожки , но начинается с левой границы поля заполнения дорожки , что, вероятно, объясняется тем, что преобразование свойство создает контекст наложения.

Запись движения большого пальца в Edge при горизонтальном масштабировании дорожки.

По вертикали большой палец выровнен по центру дорожки в Firefox, по-видимому, выровнен по середине в Edge, хотя я получаю очень запутанные разные результаты в нескольких тестах одной и той же ситуации, и верхняя часть его рамки выравнивается по верхнему краю поля содержимого дорожки в Chrome после того, как мы установили -webkit-appearance: none на фактическом входе и на большом пальце, чтобы мы могли стилизовать ползунок.

Хотя решение Chrome сначала кажется странным, в большинстве случаев раздражает, а в последнее время даже способствовало взлому в… Edge (но об этом чуть позже), в этом есть некоторая логика. По умолчанию высота дорожки в Chrome определяется высотой большого пальца, и если мы посмотрим на вещи с этой точки зрения, выравнивание по верхнему краю больше не будет казаться полным безумием.

Однако нам часто требуется, чтобы большой палец был больше высоты дорожки и был выровнен по центру дорожки.Мы можем исправить выравнивание Chrome с помощью margin-top в стилях, которые мы установили для псевдо :: - webkit-slider-thumb .

К сожалению, таким образом мы нарушаем вертикальное выравнивание в Edge. Это связано с тем, что Edge теперь также применяет стили, установленные через :: - webkit-slider-thumb . По крайней мере, у нас есть возможность сбросить margin-top до 0 в стилях, которые мы установили на :: - ms-thumb . Демо ниже показывает очень простой пример этого в действии.

См. Pen by thebabydino (@thebabydino) на CodePen.

Как и в случае с дорожкой, значение свойства box-sizing составляет border-box в Chrome и content-box в Edge и Firefox, поэтому для получения согласованных результатов во всех браузерах нам необходимо установите его явно, если мы хотим иметь ненулевую границу или отступ на большом пальце.

Поле и заполнение по умолчанию равны 0 во всех трех браузерах.

После установки -webkit-appearance: none как на ползунке, так и на большом пальце (установка только одного из двух ничего не меняет), размеры большого пальца сбрасываются с 10x21 (размеры, которые не соответствуют t зависит от размера шрифта от ) до 129x0 в Chrome. Высота дорожки и фактического слайдера также сбрасывается до 0 , поскольку они зависят от их содержимого (большой палец внутри, высота которого стала 0 ).

Модель коробки для большого пальца в Chrome.

Это также то, почему явная установка высоты на большом пальце заставляет дорожку принимать ту же высоту .

Согласно Chrome DevTools, в любом случае нет границы , хотя до установки -webkit-appearance: none , похоже, что она есть.

Как ползунок выглядит в Chrome до установки -webkit-appearance: none .

Если это не граница , это может быть контур или прямоугольная тень без размытия и положительного распространения.Но, согласно Chrome DevTools, у нас нет ни контура , ни box-shadow на большом пальце.

Вычисленные значения для outline и box-shadow в Chrome DevTools.

Установка -webkit-appearance: none в Edge приводит к изменению размеров большого пальца от 11x11 (значения, не зависящие от размера шрифта ) до 0x0 . Явная установка высоты на большом пальце заставляет дорожку принимать начальную высоту ( 11 пикселей ).

Модель коробки для большого пальца в Edge.

В Edge изначально нет границы на большом пальце. Однако после установки фона либо на фактическом диапазоне , на входе , либо на любом из его компонентов, мы внезапно получаем сплошной сплошной белый цвет (слева и справа, но не сверху и снизу), который визуально превращается в . черный в состоянии : активный (хотя Edge DevTools, похоже, этого не замечает). Установка -webkit-appearance: none удаляет border-width .

Большой палец граница в Edge.

В Firefox без установки такого свойства, как background для диапазона input или его компонентов, размеры ползунка составляют 1.666x3.333 , и в этом случае они не меняются с шрифтом - размер . Однако, если мы установим что-то вроде background: transparent на ползунке (или любое значение background на его компонентах), то ширина и высота ползунка станут 1em .

Модель ползунка для большого пальца в Firefox.

В Firefox, если верить тому, что мы видим в DevTools, у нас изначально сплошной толстый серый цвет ( rgb (153, 153, 153) ) border .

Граница большого пальца в Firefox DevTools.

Однако визуально я нигде не могу увидеть эту толстую серую границу .

Как ползунок выглядит изначально в Firefox до установки фона для него или любого из его компонентов.

После установки фона на фактическом диапазоне , ввод или один из его компонентов, граница большого пальца фактически становится визуально обнаруживаемой, и она кажется .1em .

Граница большого пальца в Firefox.

В Chrome и Edge радиус границы всегда равен 0 .

Большой палец border-radius в Chrome (вверху) и Edge (внизу).

В Firefox, однако, у нас есть значение .5em для этого свойства, как до, так и после установки фона в диапазоне input или на его компонентах, даже если исходная форма большого пальца не похожа на прямоугольник со скругленными углами.

Большой палец border-radius в Firefox.

Странная начальная форма большого пальца в Firefox заставила меня задуматься, нет ли в нем набора clip-path , но, согласно DevTools, это не так.

Большой палец clip-path в Firefox.

Скорее всего, форма большого пальца связана с настройкой -moz-field , хотя, по крайней мере, в Windows 10, это не делает его похожим на любой другой слайдер.

Первоначальное появление слайдера в Firefox vs.появление родного слайдера Windows 10.

Цвет фона большого пальца сообщается как rgba (0, 0, 0, 0) ( прозрачный, ) Chrome DevTools, хотя он выглядит серым до установки -webkit-appearance: none . У нас также, кажется, нет background-image , которое могло бы объяснить градиент или линии на большом пальце до установки -webkit-appearance: none . Firefox DevTools сообщает, что это rgb (240, 240, 240) , хотя он выглядит синим, пока у нас нет фона , явно установленного для фактического диапазона input или любого из его компонентов.

Цвет фона большого пальца в Chrome (вверху) и Firefox (внизу).

В Edge цвет фона равен rgb (33, 33, 33) до установки -webkit-appearance: none и transparent после.

Большой палец , цвет фона в Edge.

Компонент прогресса (заполнения) диапазона

У нас есть только выделенные псевдоэлементы для этого в Firefox ( :: - moz-range-progress ) и в Edge ( :: - ms-fill-lower ).Обратите внимание, что этот элемент является братом дорожки в Firefox и потомком в Edge. Это означает, что его размер относительно фактического ввода в Firefox, но относительно дорожки в Edge.

Чтобы лучше понять это, примите во внимание, что граница дорожки идеально вписывается по горизонтали в поле содержимого ползунка и что дорожка имеет как границу , так и отступ .

В Firefox левая граница поля рамки компонента прогресса всегда совпадает с левой границей поля содержимого ползунка .Когда текущее значение ползунка является его минимальным значением, правый предел поля border-box нашего прогресса также совпадает с левым пределом поля content-box ползунка. Когда текущее значение ползунка является его максимальным значением, правый предел поля border-box нашего прогресса совпадает с правым пределом поля content-box ползунка.

Это означает, что ширина рамки нашего прогресса идет от 0 до ширины поля содержимого ползунка .В общем, когда ползунок находится на x% расстояния между двумя предельными значениями, ширина рамки border-box для нашего прогресса составляет x% от ширины content-box ползунка. .

Это показано в записи ниже. Область padding всегда прозрачна, в то время как область border и content-box полупрозрачны (оранжевый для фактического ввода , красный для дорожки, серый для прогресса и фиолетовый для большого пальца).

Как изменяется ширина компонента :: - moz-range-progress в Firefox.

В Edge, однако, левая граница рамки заливки всегда совпадает с левой границей рамки содержимого дорожки , в то время как правая граница рамки заливки всегда совпадает с вертикальной линией, которая разделяется рамку большого пальца - рамку на две равные половины. Это означает, что, когда текущее значение ползунка является его минимальным значением, правый предел поля границы заливки составляет половину границы поля ползунка справа от левой границы поля содержимого дорожки .И когда текущее значение ползунка является его максимальным значением, правый предел поля границы заливки составляет половину границы поля ползунка слева от правой границы поля содержимого дорожки .

Это означает, что ширина рамки нашего прогресса идет от половины ширины рамки большого пальца за вычетом левой границы дорожки и отступа до ширины Контент-бокс дорожки плюс правый отступ дорожки и граница минус половина ширины границы рамки большого пальца .В общем, когда ползунок находится на расстоянии x% от расстояния между двумя предельными значениями, ширина рамки для нашего прогресса равна его минимальной ширине плюс x% разницы между его максимальная и минимальная ширина .

Все это проиллюстрировано следующей записью этой живой демонстрации, с которой вы можете играть:

Как ширина компонента :: - ms-fill-lower изменяется в Edge.

Хотя приведенное выше описание подхода Edge может показаться более сложным, я пришел к выводу, что это лучший способ изменить ширину этого компонента, поскольку подход Firefox может вызвать некоторые проблемы.

Например, рассмотрим случай, когда у нас нет границы или отступа на дорожке для согласованности между браузерами, а высота как для заливки, так и для ползунка границы равна высоте дорожки. Кроме того, большой палец представляет собой диск (радиус границы : 50%, ).

В Edge все нормально:

Как наш пример работает в Edge.

Но в Firefox все выглядит неуклюже (живая демонстрация):

Как наш пример работает в Firefox.

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

box-sizing имеет одинаковое вычисленное значение в обоих браузерах - content-box .

Вычисленное значение для размера окна в случае компонента прогресса (заполнения): Firefox (вверху) и Edge (внизу).

В Firefox высота прогресса составляет . 2em , а отступ , граница и поле - все 0 .

Высота прогресса в Firefox.

В Edge высота заливки равна высоте content-box дорожки, с отступом , границей и полями , как и в Firefox.

Высота заливки в Edge.

Изначально фон этого элемента - rgba (0, 0, 0, 0) ( прозрачный, , поэтому мы сначала его не видим) в Firefox и rgb (0, 120, 115) в Edge.

Цвет фона прогресса (заливки) в Firefox (вверху) и Edge (внизу).

В обоих случаях вычисленное значение свойства цвет составляет rgb (0, 0, 0) (сплошной черный ).

Вычисленное значение для цвета в случае компонента прогресса (заливки): Firefox (вверху) и Edge (внизу).Браузеры

WebKit не предоставляют такой компонент, и, поскольку у нас больше нет способа получить доступ и использовать псевдонимы :: before или :: after дорожки, нашим единственным вариантом эмуляции этого остается наслоение дополнительных , неповторяющийся фон поверх существующего трека для этих браузеров и размер этого дополнительного слоя по оси x зависит от текущего значения диапазона input .

Самый простой способ сделать это в настоящее время - использовать переменную CSS с текущим значением --val , которая содержит текущее значение ползунка.Мы обновляем эту переменную каждый раз, когда значение ползунка изменяется, и мы делаем background-size этого верхнего слоя значением calc () в зависимости от --val . Таким образом, нам не нужно ничего пересчитывать при изменении значения диапазона input - наше значение calc () является динамическим, поэтому достаточно обновления переменной --val (не только для этого фона ) -размер , но также и для других стилей, которые тоже могут от него зависеть).

См. Ручку от thebabydino (@thebabydino) на CodePen.

Также можно сделать это для Firefox, если способ увеличения :: - moz-range-progress не подходит для нашего конкретного случая использования.

Edge также предоставляет :: - ms-fill-upper , который в основном является дополнением к нижнему, и это серебристый фон этого псевдоэлемента, который мы изначально видим справа от большого пальца, а не дорожка (дорожка прозрачная ).

Клещи и этикетки

Edge - единственный браузер, в котором по умолчанию отображаются галочки.Они отображаются на дорожке, разделяя две, пять, десять, двадцать секций, точное количество изначально зависит от ширины дорожки . Единственный стиль, который мы можем изменить для этих отметок, - это свойство color , поскольку оно унаследовано от дорожки (поэтому установка color: transparent на дорожке удаляет начальные отметки в Edge).

Структура, которая генерирует начальные отметки на треке в Edge.

В спецификации говорится, что метки и метки могут быть добавлены путем связывания элемента datalist , для которого option дочерние элементы мы можем указать атрибут label , если мы хотим, чтобы эта конкретная метка также имела метку.

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

Отметки в Chrome.

Кроме того, установка -webkit-appearance: none на фактическом слайдере (что нам нужно, чтобы иметь возможность стилизовать его) заставляет эти отметки исчезнуть.

Edge присоединяется к клубу и также не показывает никаких ярлыков, а также не позволяет сильно контролировать внешний вид меток. Хотя добавление datalist позволяет нам контролировать, какие отметки должны отображаться на дорожке, мы не можем стилизовать их, кроме изменения свойства color в компоненте дорожки.

Отметки в Edge.

В Edge у нас также есть псевдоэлементы :: - ms-ticks-before и :: - ms-ticks-after . Это в значительной степени то, на что они похожи - галочки до и после трека.Однако мне трудно понять, как они работают.

Они скрыты дисплеем : нет , поэтому изменение этого свойства на блок делает их видимыми , если мы также явно установили ползунок высоту , даже если это не изменит их собственную высоту .

Как сделать так, чтобы отметки с отметкой :: - ms-ticks-after были видны в Edge.

Кроме того, мы можем установить такие свойства, как margin , padding , height , background , color , чтобы контролировать их внешний вид.Однако я понятия не имею, как контролировать толщину отдельных штрихов, как создать градиентный фон для отдельных штрихов или как сделать некоторые из них большими, а некоторые второстепенными.

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

См. Ручку от thebabydino (@thebabydino) на CodePen.

Подсказка / отображение текущего значения

Edge - единственный браузер, который предоставляет всплывающую подсказку через :: - ms-tooltip , но это не отображается в DOM, не может быть стилизовано (мы можем только скрыть его, установив display: none на нем) и может отображать только целочисленные значения, поэтому он совершенно бесполезен для диапазона input между, скажем, .1 и . 4 - все отображаемые значения - 0 !

:: - ms-tooltip , когда оба предела диапазона являются субунитарными.

Так что лучше всего просто скрыть это и использовать элемент output для всех браузеров, снова воспользовавшись возможностью сохранения текущего значения ползунка в переменной --val , а затем используя calc () значение в зависимости от этой переменной для позиции.

See the Pen by thebabydino (@thebabydino) на CodePen.

Ориентация

Хорошая новость в том, что каждый браузер позволяет создавать вертикальные слайдеры. Плохая новость заключается в том, что, как вы уже догадались ... каждый браузер предоставляет свой способ сделать это, ни один из которых не представлен в спецификации (установка ширины на меньше, чем высота в диапазоне , вход ) . Браузеры WebKit выбрали -webkit-appearance: slider-vertical , Edge для режима письма : bt-lr , в то время как Firefox управляет этим с помощью атрибута orient со значением «вертикальный» .

Действительно плохая новость заключается в том, что для браузеров WebKit создание вертикального слайдера таким образом не позволяет нам устанавливать для него какие-либо пользовательские стили (поскольку для настройки пользовательских стилей требуется значение none для -webkit-appearance ).

Наш лучший вариант - просто стилизовать наш диапазон input как горизонтальный, а затем повернуть его с помощью преобразования CSS .

См. Ручку от thebabydino (@thebabydino) на CodePen.

примеров слайдера с ориентацией aria и текстом aria-valuetext

Примеры слайдера с ориентацией aria и текстом aria-value | Авторские практики WAI-ARIA 1.1

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

Подобные примеры включают:

Пример

Поддержка клавиатуры

Роль, свойство, состояние и атрибуты Tabindex

Исходный код JavaScript и CSS

Исходный код HTML

Шаблон дизайна слайдера в методиках разработки WAI-ARIA 1.1

101 CSS Slider

Коллекция бесплатных HTML и CSS слайдеров. Примеры кода : карточка , сравнение, полноэкранный режим, адаптивный, простой и т. Д. Обновление коллекции за май 2020 года. 5 новинок.

1. Слайдеры для карточек
2. Ползунки сравнения (до / после)
3. Полноэкранные слайдеры
4. Адаптивные слайдеры
5. Простые слайдеры

1. CSS Слайд-шоу
2. Слайдеры Bootstrap
3. Слайдеры jQuery

Автор

• Джефф Хэм
• 10 января 2016

Сделано с

• HTML / Haml
• CSS / SCSS
• JavaScript / CoffeeScript (jquery.js)

О коде

Экраны подключения

Набор экранов онбординга в HTML / CSS / JS. Персональный эксперимент с наслоением значков PNG, переходов CSS3 и flexbox.

Демонстрационное изображение: Слайдер информационных карт

Слайдер информационных карт

Слайдер информационных карточек HTML, CSS и JavaScript.
Сделано Энди Траном
23 ноября 2015 г.

Демонстрационное изображение: Эластичный слайдер

Эластичный слайдер

Фото-слайдер, работающий в настольных и мобильных браузерах.
Сделано Taron
29 сентября 2014 г.

Автор

• Марио Дуарте
• 14 августа 2017

Сделано с

• HTML
• CSS / SCSS
• JavaScript / Babel (jquery.js)

О коде

Ползунок сравнения изображений

Простой и понятный слайдер для сравнения изображений, полностью адаптивный и готовый к работе с сенсорным экраном, созданный с помощью CSS и jQuery.

Автор

• Мэтью Стил
• 19 июля 2017

О коде

Слайдер до / после без Javascript

Слайдер до и после только html и css.

Автор

• Хью Ллевеллин
• 14 июля 2017

О коде

3-х слойный слайдер до и после

Поиграю с новой идеей, используя мой двухслойный слайдер изображения до / после.Сохранение минимума. Держим ваниль. Нравится, если пригодится 🙂

Демо-изображение: Слайдер изображения до и после (Vanilla JS)

Слайдер изображения до и после (Vanilla JS)

Vanilla JS, минималистичный, приятный на вид.
Сделано Huw
3 июля 2017 г.

Автор

• Envato Tuts +
• 15 мая 2017

О коде

Разделенный экран UI

Элемент слайдера с разделением экрана и JavaScript.

Демонстрационное изображение: Галерея слайдеров до и после с масками SVG

Галерея слайдеров до и после с масками SVG

Небольшой эксперимент для слайдера до и после внутри SVG. Маскировка делает это довольно просто. Поскольку все это SVG, изображения и подписи прекрасно масштабируются вместе. Плагины GreenSock Draggable и ThrowProps использовались для управления ползунком.
Сделано Крейгом Роблевски
17 апреля 2017 г.

Демонстрационное изображение: HTML5 Слайдер до и после сравнения

HTML5 Слайдер до и после сравнения

Использует настраиваемый ввод диапазона для ползунка.
Сделано Дадли Стори
14 октября 2016 г.

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

Ползунок сравнения адаптивных изображений

Адаптивный слайдер сравнения изображений с HTML, CSS и JavaScript.
Сделано Эге Гёргюлю
3 августа 2016 г.

Демонстрационное изображение: Слайдер сравнения видео HTML5 до и после

Слайдер сравнения видео HTML5 до и после

Ползунок сравнения видео до и после HTML5, CSS3 и JavaScript.
Сделано Дадли Стори
24 апреля 2016 г.

Демонстрационное изображение: Ползунок сравнения изображений

Ползунок сравнения изображений

Удобный перетаскиваемый слайдер для быстрого сравнения двух изображений на основе CSS3 и jQuery.
Сделано CodyHouse
15 сентября 2014 г.

О коде

Слайдер электронной торговли на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Слайдер на чистом CSS

Простой слайдер на основе радиовходов.100% чистый HTML + CSS. Работает также с клавишами со стрелками.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор

• Внутренний DonalLogue
• 24 января 2018

Сделано с

• HTML / Мопс
• CSS / SCSS
• JavaScript

О коде

Ползунок Переход

Хороший эффект перехода для полноэкранного слайдера.

Сделано с

• HTML
• CSS / SCSS
• JavaScript (swiper.js)

О коде

Слайдер с горизонтальным параллаксом

Ползунок с горизонтальным параллаксом и Swiper.js.

Автор

• Алексей Ноздрюхи
• 17 августа 2017

Сделано с

• HTML / Мопс
• CSS
• JavaScript / Babel

О коде

Слайдер с плавной трехмерной перспективой

Отзывчивый плавный бегунок 3D перспективы при перемещении мыши.

Демо-изображение: полноэкранный слайдер героя

Полноэкранный слайдер героя

Полноэкранный слайдер с изображением героя (тема смахиваемых панелей) с HTML, CSS и JavaScript.
Сделано Тобиасом Больоло
25 июня 2017 г.

Демо-изображение: Velo.js Slider With Borders

Velo.js Slider With Borders

Элемент взаимодействия с ползунком, использующий эффекты скорости и скорости (UI Pack) для улучшения анимации. Анимация запускается с помощью клавиш со стрелками, нажатия кнопки навигации или гнезда прокрутки.Эта версия включает границы как часть взаимодействия.
Сделано Стивеном Скаффом
11 мая 2017 г.

Демо-изображение: Popout Slider

Popout Slider

Простой слайдер в минималистичном стиле для демонстрации изображений. Часть изображения появляется на каждом слайде.
Сделано Натаном Тейлором
22 января 2017 г.

Демонстрационное изображение: Адаптивный перетаскивающий слайдер параллакса с прозрачными буквами

Адаптивный перетаскивающий слайдер параллакса с прозрачными буквами

Вещь довольно проста в настройке.Вы можете смело менять шрифт, размер шрифта, цвет шрифта, скорость анимации. Первая буква новой строки в массиве в JS появится на новом слайде. Легко создать (или удалить) новый слайд: 1. Добавьте новый город в массив на JS. 2. Измените переменную количества слайдов и поместите новое изображение в список scss в CSS.
Автор Руслан Пивоваров
8 октября 2016 г.

Демо-изображение: Fancy Slider

Fancy Slider

Особенности:

1. Обрезка для рамки прямоугольника маскировки изображения (только для webkit).
2. Режим наложения для этой маски.
3. Умная система цвета, просто поместите свое имя и значение цвета в карту sass, а затем добавьте соответствующий класс с этим именем цвета к элементам, и все будет работать!
4. Прохладное боковое меню кредитов (нажмите маленькую кнопку в центре демонстрации).
5. Vanilla js с

Сделал Николай Таланов
7 октября 2016 г.

Демонстрационное изображение: серый и белый - наклонный слайдер с прокруткой

Серый и белый - наклонный слайдер с прокруткой

Это перекошенный слайдер с прокруткой на чистом JS и CSS (без библиотек).
Автор Виктор Белозёров
3 сентября 2016 г.

Демо-изображение: Pokemon Slider

Pokemon Slider

Слайдер-анимация с изображением покемонов.
Сделано Фамом Микуном
18 августа 2016 г.

Демонстрационное изображение: ползунок с полураскрашенным угловым текстом

Ползунок с полураскрашенным угловым текстом

Слайдер HTML, CSS и JavaScritp со сложной анимацией и полураскрашенным наклонным текстом.
Автор Руслан Пивоваров
13 июля 2016 г.

Демонстрационное изображение: эффект параллакса слайдера

Эффект параллакса слайдера

Эффект параллакса слайдера с HTML, CSS и JavaScript.
Сделано Мануэлем Мадейрой
28 июня 2016 г.

Демонстрационное изображение: слайдер с эффектом пульсации

Слайдер с эффектом пульсации

Слайдер HTML, CSS и JavaScript с эффектом пульсации.
Сделано Педро Кастро
21 мая 2016 г.

Демо-изображение: Ползунок выделения траектории клипа

Ползунок раскрытия траектории клипа

Ползунок, открывающий Clip-Path с HTML, CSS и JavaScript.
Сделал Николай Таланов
16 мая 2016 г.

Демо-изображение: Preview Slider

Preview Slider

GSAP + Плавный слайдер с предварительным просмотром предыдущих / следующих слайдов.
Сделано Карло Видеком
27 апреля 2016 г.

Демо-изображение: полностраничный слайдер

Полностраничный слайдер

Полностраничный слайдер HTML, CSS и JavaScript.
Сделано Джозефом Мартуччи
28 февраля 2016 г.

Демо-изображение: прототип полного слайдера

Полный прототип слайдера

Полный прототип слайдера с HTML, CSS и JavaScript.
Сделано Gluber Sampaio
6 января 2016 г.

Демонстрационное изображение: Анимированное слайд-шоу Greensock

Анимированное слайд-шоу Greensock

Полноэкранное, своего рода отзывчивое слайд-шоу, анимированное с помощью Greensocks TweenLite / Tweenmax.
Сделано Arden
12 декабря 2015 г.

Демонстрационное изображение: линейный слайдер с эффектом SplitText

Линейный слайдер с эффектом SplitText

Линейный слайдер с эффектом SplitText.
Сделано Arden
5 декабря 2015 г.

Демонстрационное изображение: полноэкранный слайдер (временная шкала GSAP) # 1

Полноэкранный слайдер (временная шкала GSAP) # 1

Полноэкранный слайдер (временная шкала GSAP) №1 с HTML, CSS и JavaScript.
Сделано Дьяко М.Лотфоллахи
23 ноября 2015 г.

Демонстрационное изображение: слайдер на чистом CSS с настраиваемыми эффектами

Слайдер на чистом CSS с настраиваемыми эффектами

Слайдер HTML и CSS с настраиваемыми эффектами.
Сделал Николай Таланов
12 ноября 2015 г.

Демонстрационное изображение: полноэкранный перетаскивающий слайдер с параллаксом

Полноэкранный перетаскивающий слайдер с параллаксом

Полноэкранный перетаскиваемый слайдер с параллаксом с HTML, CSS и JavaScript.
Сделал Николай Таланов
12 ноября 2015 г.

Демонстрационное изображение: Actual Rotating Slider

Actual Rotating Slider

Доказательство концепции вращающегося слайдера. Использует clip-path и много математики.
Автор Тайлер Джонсон
16 апреля 2015 г.

Демо-изображение: простой адаптивный полноэкранный слайдер

Простой отзывчивый полноэкранный слайдер

Простой полноэкранный слайдер CSS и jQuery с плавностью translateX и translate3d!
Сделано Джозефом
19 августа 2014 г.

Автор

• Дэвид Льюис
• 29 июня 2014 г.

О коде

CSS-слайдер с элементами управления с клавиатуры

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Карусель с прокруткой и привязкой на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор

• Иван Гроздич
• 1 июля 2020

О коде

CSS-слайдер

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootstrap.css

Автор

• Чаранджит Хана
• 23 апреля 2020

О коде

Слайд-шоу на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Слайдер на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Самый маленький слайдер без JS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Ползунок прозрачности изображения

Ползунок прозрачности изображений в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Схема расположения гибких слайдов

В этом примере показано, как создать макет слайдов, наложенных друг на друга (особенно полезно для переходов постепенного появления / исчезновения). Это достигается без установки их высоты и избегания position: absolute; поэтому они полностью гибкие, и их легко поддерживать в обычном потоке страниц.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор

• Николя Каке
• 22 ноября 2018

О коде

Адаптивный слайдер

Анимированный отзывчивый слайдер в HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: анимировать.css

О коде

Слайдер с замаскированным текстом

Ползунок только CSS с замаскированным текстом.

Совместимые браузеры: Chrome, Edge (частично), Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Слайдер Oceanic Overlays

Изображение и контент слайдер с эффектом параллакса.

О коде

CSS-слайдер

Галерея слайдов только CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор

• Брэндон МакКоннелл
• 28 февраля 2018

О коде

Слайдер на чистом HTML / CSS

Ползунок на чистом HTML / CSS с круглой шкалой выполнения SVG.

Совместимые браузеры: Chrome, Edge (частично), Firefox (частично), Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор

• Чэнь Хуэй Цзин
• 5 августа 2017

О коде

Адаптивный вертикальный слайдер CSS с миниатюрами

Эксперимент по созданию полностью адаптивного вертикального слайдера с миниатюрами с использованием только CSS и сохранением соотношения сторон изображений.

Автор

• Кэтрин Като
• 3 августа 2017 г.

О коде

Слайдер изображений Flexbox

Простой слайдер / карусель изображений Flexbox, созданный с использованием ванильного JavaScript.

Автор

• Дамиан Мути
• 26 июля 2017

Сделано с

• HTML
• CSS / SCSS
• JavaScript (jquery.js, slick.js)

О коде

Эффект размытия в движении с использованием фильтров SVG

Это эксперимент, который имитирует эффект размытия движения при каждом переключении слайда.Он использует преимущества фильтра SVG Gaussian Blur и некоторой анимации ключевых кадров CSS. Хотя для правильной работы эффекта не требуется какой-либо Javascript, в этом примере Javascript используется только для функциональности ползунка.

Автор

• Артур Седлуха
• 16 июля 2017

Сделано с

• HTML / Мопс
• CSS / SCSS
• JavaScript (jquery.js, tweenmax.js)

О коде

Анимированный слайдер Greensock

Cool анимирует слайдер с помощью JS.

Автор

• Дамиан Мути
• 8 июля 2017 г.

О коде

Слайдер изображений только для CSS с использованием шаблонов SVG

Это эксперимент о том, как шаблоны SVG могут помочь нам создавать изображения, похожие на маски, для слайдера изображений только на CSS.

Демонстрационное изображение: Переходы ползунка

Переходы ползунка

Изучение некоторых переходов ползунка. Ползунок Swiper с включенной опцией параллакса. В основном здесь играем с фильтрами CSS.
Сделано Мирко Зоричем
12 июня 2017 г.

Демонстрационное изображение: GSAP Slider

GSAP Slider

Простой слайдер GSAP с небольшой анимацией промежуточного кадра.
Сделано Гораном Врбаном
9 июня 2017 г.

Демо-изображение: Slider UI

Slider UI

Интерфейс слайдера с HTML, CSS и JavaScript.
Сделано Мергим Ужкани
6 июня 2017 г.

Демонстрационное изображение: слайдер GSAP

Slider GSAP

Слайдер GSAP virsion 2.
Сделано Em An
4 мая 2017 г.

Демонстрационное изображение: Slice Slider

Slice Slider

Небольшой слайдер перехода, использующий простую операцию добавления класса. Придется немного сгладить тайминги и выбрать лучший подход для мобильных устройств (просто складывать, добавлять события касания, делать изображения во весь экран и т. Д. Поддерживает колесо прокрутки (прокрутка), кнопки навигации и клавиши со стрелками.Также можно увеличить оболочку содержимого, чтобы изображения заполняли область просмотра в неанимируемом состоянии, что тоже неплохо.
Сделано Стивеном Скаффом
3 января 2017 г.

Демонстрационное изображение: Эффект анимации слайдера

Эффект анимации слайдера

Используется CSS border-image и clip-path для создания эффекта анимации слайдера.
Автор Эмили Хейман
31 декабря 2016 г.

Демонстрационное изображение: Flexbox Slider

Flexbox Slider

Маленький слайдер, созданный с помощью flexbox.В некоторой степени отзывчивый и может иметь фиксированные элементы рядом с областью ползунка.
Сделано Робертом
28 ноября 2016 г.

Демонстрационное изображение: Canvas Slider

Canvas Slider

HTML, слайдер холста CSS.
Сделано Nvagelis
29 октября 2016 г.

Демонстрационное изображение: слайдер для кексов, только CSS,

, слайдер для кексов, только для CSS,

HTML и CSS слайдер для кексов с брызгами!
Сделано Джейми Коултером
14 октября 2016 г.

Демонстрационное изображение: Изучение анимации пользовательского интерфейса № 3

Изучение анимации пользовательского интерфейса № 3

Изучение анимации пользовательского интерфейса №3 с помощью HTML, CSS и JavaScript.
Сделано mario s maselli
12 октября 2016 г.

Демонстрационное изображение: Изучение анимации пользовательского интерфейса №2

Изучение анимации пользовательского интерфейса №2

Изучение анимации пользовательского интерфейса №2 с помощью HTML, CSS и JavaScript.
Сделано mario s maselli
22 сентября 2016 г.

Демонстрационное изображение: Изучение анимации пользовательского интерфейса № 3

Изучение анимации пользовательского интерфейса № 3

Изучение анимации пользовательского интерфейса №3 с помощью HTML, CSS и JavaScript.
Сделано mario s maselli
22 сентября 2016 г.

Демо-изображение: Ecommerce Slider v2.0

Слайдер электронной торговли v2.0

Ecommerce Slider v2.0 с HTML, CSS и JavaScript.
Сделано Педро Кастро
17 сентября 2016 г.

Демонстрационное изображение: чистый слайдер с изогнутым фоном

Чистый слайдер с изогнутым фоном

Чистый слайдер HTML, CSS и JavaScript с изогнутым фоном.
Автор Руслан Пивоваров
13 сентября 2016 г.

Демонстрационное изображение: изучение анимации пользовательского интерфейса № 1

Исследование анимации пользовательского интерфейса № 1

Изучение UI-анимации №1 с помощью HTML, CSS и JavaScript.
Сделано mario s maselli
8 сентября 2016 г.

Демо-изображение: нарезка изображений на чистом CSS и многое другое

Нарезка изображений на чистом CSS и многое другое

Наслаждайтесь мощью CSS: вверх и вниз каждое среднее изображение и разбитый на страницы слайдер с лайтбоксом.
Сделано Kseso
15 августа 2016

Демонстрационное изображение: слайдер карусели с двойной экспозицией

Слайдер карусели с двойной экспозицией

Двойная экспозиция - это фотографическая техника, которая объединяет 2 разных изображения в одно изображение.
Сделано Мисаки Накано
3 августа 2016 г.

Демонстрационное изображение: Slider

Slider

Slider с использованием CSS3 property clip.
Сделано Педро Кастро
1 мая 2016 г.

Демонстрационное изображение: CSS Slider

CSS Slider

Адаптивный CSS-слайдер.
Сделано geekwen
19 апреля 2016 г.

Демо-изображение: Непереводимое

Непереводимое

Это простой эксперимент с слайдером, показывающий слова с красивым значением, которые нельзя напрямую перевести.Фокус: элегантная типографика и простые, но соблазнительные переходы.
Сделано Джо Гарри
5 апреля 2016 г.

Демонстрационное изображение: слайдер изображения с эффектом маскирования

Ползунок изображения с эффектом маскирования

Идея анимации состоит в том, чтобы изменить значение пути клипа CSS, чтобы создать эффект маскировки.
Сделано Бхакти Аль Акбаром
31 марта 2016 г.

Демонстрационное изображение: Dot Slider

Dot Slider

Точечный слайдер с HTML, CSS и JavaScript.
Сделано Дереком Нгуеном
16 марта 2016 г.

Демонстрационное изображение: Слайдер с эффектом призмы

Слайдер с эффектом призмы

Слайдер с эффектом призмы с HTML, CSS и JavaScript.
Сделано victor
12 марта 2016 г.

Демонстрационное изображение: скользящая фоновая галерея

Раздвижная фоновая галерея

Раздвижная фоновая галерея с HTML, CSS и JavaScript.
Сделано Роном Гирлахом
30 ноября 2015 г.

Демонстрационное изображение: Dual Slider

Dual Slider

Ползунок HTML, CSS и JavaScript.
Сделано Юргеном Гензером
30 сентября 2015 г.

Демонстрационное изображение: Sequence.js - Mono

Sequence.js - Mono

Слайдер продукта на базе Sequence.js. Sequence.js - адаптивная структура анимации CSS для создания уникальных слайдеров, презентаций, баннеров и других пошаговых приложений.
Автор Ян Ланн
15 сентября 2015 г.

Демонстрационное изображение: Tiny Circle Slider

Tiny Circle Slider

Крошечный круговой слайдер по индивидуальному заказу.
Сделано Брамом де Хааном
11 августа 2015 г.

Демо-изображение: Адаптивный слайдер GTA V

Адаптивный слайдер GTA V

Адаптивный слайдер GTA V с HTML, CSS и JavaScript.
Сделано Эдуардом Майером
24 января 2014 г.

Демонстрационное изображение: Cubey Slider

Cubey Slider

Похоже на слайдер, но вращается кубовидно по неизвестным причинам.
Сделано Эриком Брюером
4 декабря 2013 г.

Демонстрационное изображение: CSS Hover Slider

CSS Hover Slider

Ползунок наведения на чистом CSS.
Сделано Хьюго Дарби Браун
28 августа 2013 г.

Автор

• Батухан Баш
• 14 июня 2020

О коде

Слайдерная карта

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор

• Абубакер Саид
• 22 мая 2020

О коде

Только CSS: карусель / слайдер с правильным перемещением между слайдами

В этом я использую селекторы CSS и небольшие хитрости / уловки для архивирования правильного эффекта скольжения между слайдами, старый будет примерно таким, когда вы меняете слайд: 1-й идет назад (влево), а 2-й идет вперед (в центре) и если вы измените его на 3-й... 2-й идет назад (слева), а 3-й идет вперед (в центре) и так далее ... Это делает скольжение странным, и в большинстве случаев мы используем JavaScript для архивирования правильного скольжения, поэтому я начинаю экспериментировать и может сохранять правильный эффект скольжения только с помощью CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор

• ТаренаМелишка
• 13 марта 2020

О коде

Parallax Horizontal Image Scroller - Нет JS

Parallax похож на брезент: если не прибить все углы, он просто не сработает.С эффектами параллакса вертикальной прокрутки за десять центов я был шокирован тем, насколько сложно было найти хороший эффект горизонтального параллакса, который не был бы загружен jquery или другими вызовами разных служб или сверхтяжелым CSS, таким как карусель Bootstrap. Почему, подумал я, так сложно найти объяснение горизонтальному параллаксу? На самом деле, для работы ему не нужны все эти дополнительные скрипты! Итак… Я копался в веб-сайтах и ​​закодировал множество кодов, взламывая их, чтобы попытаться переписать, и понял, как все части работают.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Checkbox Hack

Нет флажка вообще. Но классический href = '# ..' plus : target combo.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

CSS Only Slider

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Демонстрационное изображение: слайдер с наложением изображений

Слайдер с наложением изображений

Ползунок наложения изображений с HTML, CSS и обычным JavaScript.
Производитель Югам
7 июня 2017 г.

Демонстрационное изображение: Слайдер избранных изображений на чистом CSS

Слайдер избранных изображений на чистом CSS

Ползунок избранных изображений HTML и CSS.
Сделано Джошуа Хиббертом
16 июня 2016 г.

Автор

• МАХЕШ АМБУРЕ
• 9 марта 2016

О коде

CSS-слайдер

Простой слайдер на чистом CSS на основе

Демонстрационное изображение: Feature Slider

Feature Slider

Функциональный слайдер с HTML, CSS и JavaScript.
Автор Энди Лоример
23 октября 2015 г.

Демонстрационное изображение: Анимированный слайдер куба

Анимированный слайдер куба

Только

CSS.
Сделано Альберто Харцетом
6 мая 2015 г.

Демонстрационное изображение: Simple Image Slider

Simple Image Slider

Особенности: - автоматическое слайд-шоу - пауза при наведении курсора - динамический счетчик слайдов - отображение / скрытие элементов управления при наведении.
Автор Андре Кортеллини
14 августа 2014 г.

Демонстрационное изображение: Multi Axis Image Slider

Multi Axis Image Slider

Многоосевой слайдер изображений с HTML, CSS и JavaScript.
Сделано Бурак Джан
22 июля 2013 г.

Демо-изображение: 3D Cube Slider. Чистый CSS

3D Cube Slider. Чистый CSS

Cube slider, небольшой эксперимент с 3D-преобразованиями HTML5 / CSS3.
Автор Илья К.
26 июня 2013 г.

Автор

• Паскаль Бахманн
• 25 февраля 2013 г.

О коде

CSS-слайдер изображений с кнопками "Далее / Назад"

Ползунок изображений на 100% чистом CSS с кнопками «предыдущий / следующий» и переходами между изображениями.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

.