Как сделать точки на слайдере
Обновлено: 15.05.2024
Всем привет!
Сегодня мы разберемся, как сверстать слайдер на чистом CSS, без использования JavaScript, без использования плагинов. Все сами своими руками. Заглянем под капот, разберемся в конструкции от и до. Посмотрим, какие свойства в CSS дают возможность нам сделать это.
Я покажу слайдер, который делается на основе использования свойства visibility. Такой слайдер действует по следующему принципу: все слайды помещаются в одно место, но каждый раз отображается только один из них, нужный нам. Все остальные же в этот момент просто невидимы (свойство visibility у них hidden). Меняя видимость слайдов, мы переключаем слайдер с одного слайда на другой.
Есть и другие способы создания слайдера, но общий принцип работы механизма у них похож.
Вот, что должно у нас получиться.
Начало работы.
Подготавливаем html-документ для начала работы, подбираем картинки для слайдера, все размещаем по нужным папкам, создаем и подключаем документ стилей. Кроме того, в слайдере будут использоваться стрелки, у меня, к примеру, это иконки из font awesome, поэтому необходимо скачать его, и тоже поместить в наш проект. Теперь мы готовы начать. Здесь можно скачать исходники для начала работы.
Создаем в нашем документе контейнер для будущего слайдера.
В CSS задаем размеры слайдера, выравниваем его на странице, и указываем position relative для того, чтобы потом задать абсолютное позиционирование для самих слайдов внутри контейнера.
Помещаем в контейнер все наши картинки, обернутые в div-блоки с присвоенным каждому блоку id.
Задаем у слайдеров высоту и ширину в 100% от нашего контейнера, абсолютное позиционирование, чтобы они оказались все на одном месте, и visibility: hidden. То есть изначально все слайды спрятаны.
.slides <
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
>
.slides img <
width: 100%;
height: 100%;
>
Создаем механизм
Теперь пришло время для создания основного механизма нашего слайдера, с помощью чего мы вообще будем слайды переключать. Работать все будет на основе флажков (input типа radio). Указываем эти флажки по количеству наших слайдов, каждому прописываем свой id, и на одном из слайдов, тому который должен будет показываться по умолчанию при загрузке задаем значение checked (обычно это самый первый слайд). Переключением значения checked и будут переключаться наши слайды.
Теперь нам нужно подготовить переключатели стрелочками для перелистывания слайдов вперед и назад. Делать мы их будем с помощью меток для нашего переключателя-радио. Создаем две группы меток — одна для перелистывания вперед, другая для перелистывания назад. В каждой группе по метке на каждый слайдер (на каждый наш инпут). У каждой метки обязательно указываем атрибут for для того, чтобы обозначить связь между этой меткой и флажком radio, к которому она относится. В этом атрибуте указывается id соответствующего инпута. В метки я вставила иконки font awesome для отображения стрелок.
Задаем им цвет, размер, позиционируем абсолютно, размещаем в нужном нам месте с помощью свойств top, left, right, и для начала их тоже прячем.
И последнее в структуре нашего слайдера — это переключатели-индикаторы, которые чаще всего размещают внизу в виде кружков. Они тоже будут сделаны как метки для соответствующего переключателя.
Задаем позиционирование, высоту и ширину контейнера для этих меток, и оформляем сами эти метки в виде кружков нужного нам размера, радиуса и цвета.
.switchers <
position: absolute;
width: 100%;
height: 30px;
bottom: 0;
text-align: center;
>
.switcher <
background: rgba(0, 0, 0, .7);
width: 15px;
height: 15px;
position: relative;
top: 7px;
margin: 0 4px;
display: inline-block;
border-radius: 50%;
cursor: pointer;
>
Заставляем механизм работать.
Теперь пришло время сделать так, чтобы наш слайдер заработал. В первую очередь будет использоваться псевдокласс checked в CSS. Этот псевдокласс обозначает применение какого-либо свойства только если у переключателя есть атрибут checked (то есть если он выбран).
Эта запись означает применение стилевых свойств к элементу с id first (первый наш слайд) в том случае, если у элемента с id img_1 (первый наш флажок) есть атрибут checked. Вообще, знак ~ обозначает родственные отношения между селекторами, т.е. те селекторы, которые являются близлежащими и имеют общего родителя. Таким образом, если у нас будет выбран первый флажок, то мы показываем первый наш слайд (меняем у него visibility с hidden на visible). Все остальные, напоминаю, в это время невидимы. По аналогии, если мы выбираем второй флажок, то должен показываться второй слайд, а когда выбираем третий флажок, то показывается третий слайд.
В работе слайдера мы будем пользоваться еще одной хитростью. Дело в том, что флажки переключаются не только при непосредственном нажатии на соответствующий инпут. Это у нас не выйдет — мы их спрятали. Флажки еще можно переключать при нажатии на метку, соответствующую им. Это то, что как раз нам нужно!
Наши индикаторы уже работают, если по ним пощелкать. Теперь только осталось выделить как-то тот индикатор, который соответствует своему слайду. Для этого вновь воспользуемся псевдоклассом checked
Будем закрашивать нужный индикатор (то есть изменять нужную метку), когда будет выбран соответствующий ему флажок.
Наконец, давайте заставим работать стрелочки. И опять мы будем делать это с помощью нашего сегодняшнего помощника, псевдокласса checked. Нам опять необходимо, чтобы для каждого слайда у нас показывалась одна стрелка вперед, и одна назад (а всего у нас их, напоминаю, три вперед, и три назад, только изначально они все спрятаны).
Теперь слайдер готов и полностью функционирует.
Добавляем немного плавности
.slides <
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
>
Подробно сейчас на свойстве transition останавливаться не буду, это отдельная большая тема. Если пока не знаете о нем, вставьте, как у меня.
Все! Наш слайдер на чистом CSS готов!
При желании, можете скачать код готового слайдера.
Слайдеры на CSS имеют некоторое преимущество перед слайдерами на Javascript. Одно из таких преимуществ — это скорость загрузки. Мало того что изображения для слайдеров используются больших размеров (если нет оптимизации под разные экраны), так еще и на загрузку скриптов тратится некоторое время. Но в статье Вы увидите только слайдеры на чистом CSS.
Вот что я нашел на сайте на тему слайдеров:
Как и в прошлых уроках, я рекомендую все примеры смотреть в браузере Chrome.
1. CSS3 слайдер изображений
Слайдер на CSS, который использует для навигации по слайдам радиокнопки. Эти радиокнопки находятся под слайдеров. Также помимо радиокнопок навигация осуществляется с помощью стрелок слева и справа. Чтобы следить за тем, какое изображение сейчас отображать — используются псевдоклассы :checked .
2. CSS3 слайдер изображений с миниатюрами
В отличие от прошлого слайдера на CSS, здесь вместо радиокнопок внизу расположены миниатюры всех изображений, что также бывает удобно при создании галереи изображений. Изображения сменяются со своеобразным эффектом: плавно исчезают при увеличении.
3. Галерея на CSS
А вот этот слайдер на CSS отлично подойдет для продающих страниц. Как правило, многие веб-разработчики при разработке лендингов (продающих страниц) размещают слайдер в самом начале, чтобы в первом экране (без прокрутки) посетитель сразу видел все выгоды, которые есть для него на этой странице. Помимо всего, этот слайдер является адаптивным, что также радует.
4. Слайдер на CSS без ссылок
Сразу хочу заметить что этот слайдер не использует ссылок! По умолчанию кроме главного изображения (слайда) видны еще 2 слайда. Они расположены позади основного. Смена слайдов происходит в красивом режиме: сначала раздвигаются два слайда и по центру становится тот слайд, который затем станет главным. Затем слайд увеличивается и помещается впереди остальных.
5. Адаптивный слайдер на CSS3
Еще один адаптивный слайдер, управление которого основано на радиокнопках. Чтобы посмотреть как этот слайдер будет смотреться на разных устройствах — Вы можете либо самостоятельно изменять окно браузера, либо на странице со слайдером есть специальные иконки разных устройств, кликая на которые, Вы увидите будет смотреться слайдер на компьютере, планшете или на смартфоне.
*** БОНУСНЫЙ СЛАЙДЕР ***
Кроме всех слайдеров, которые представлены выше, я хочу порадовать Вас еще одним. Этот слайдер отлично подойдет для создания галереи изображений. Словами не объяснишь то что он делает, поэтому лучше смотрите всё на видео:
Вывод
С помощью слайдеров можно красиво оформлять галереи изображений, размещая их более компактно, вставить слайдер в первый экран (часть страницы, которую видно без прокрутки) продающей страницы, чтобы сразу показать посетителю главные выгоды, которые он получит. Можно еще найти массу способ где и как можно применить слайдеры, но одно понятно точно — они несут пользу при правильном использовании.
UPD! Исправлен код, теперь слайды не выпадают !
Если есть вопросы, пишите в ЛС в VK, с вопросом прикладывайте ссылку на страницу, только так я смогу что-либо подсказать.
Ещё один метод сделать слайдер в Tilda, только с применением стандартного блока CR30N. В слайды можно превратить любой блок, включая Zero block. Минус этого слайдера только один - он полноэкранный. Хотя может и не минус, а скорее сужает область применения)). Плюс в том, что не нужно подключать сторонние плагины. Если вам необходим слайдер из мелких элементов, то лучше использовать слайдер из статьи "Карусель в Zero block на Owl Carousel".
Плагин jQuery UI Slider делает выбранные элементы ползунками. Существуют различные варианты, такие как несколько рукояток, которые можно перемещать с помощью мыши или клавишами стрелок, и диапазонов.
1. Установка
- подключаем библиотеку jQuery версии 1.7+
- подключаем библиотеку jQuery UI с виджетом Slider
- подключаем стиль jQuery UI с виджетом Slider
- подключаем плагин jQuery UI Touch Punch для корректной работы ползунков на тачпадах
- добавляем HTML для нашегно ползунка:
В итоге получим это:
2. Настройки
animate
Определяет, будет ли ползунок передвигаться плавно при клике на ползунке.
true или false, "fast" (быстро) или "slow" (медленно), или число в миллисекундах
По умолчанию: — false
classes
Добавляет дополнительные классы к классам слайдера. Может использоваться, если для разных ползунков используются разные стили.
disabled
Отключает true или включает false слайдер.
По умолчанию: — false
Максимальное значение ползунка.
По умолчанию: — 100
Минимальное значение ползунка.
По умолчанию: — 0
orientation
Горизонтальная "horizontal" или вертикальная "vertical" ориентация слайдера
По умолчанию: — "horizontal"
range
Определяет диапазон ползунка
Значение true включит второй ползунок и диапазон между ними, "min" - диапазон от минимума шкалы до ползунка, "max" - диапазон от ползунка до максимума шкалы
По умолчанию: — false
Шаг значений ползунка, который должен быть кратным разнице между максимальным и минимальным значением шкалы.
По умолчанию: — 1
value
Начальное значение ползунка, если он один
По умолчанию: — 0
values
Начальные значения ползунков, если их два, например [ 10, 20 ]
По умолчанию: — null
3. Методы
Вызов этих функций позволяет быстро влиять на работу ползунка и получать с него данные
$( ".selector" ).slider( "destroy" );
Полностью удаляет функциональность ползунка, что вернет элемент обратно в исходное состояние.
$( ".selector" ).slider( "disable" );
$( ".selector" ).slider( "enable" );
Возобновляет работу ползунка.
$( ".selector" ).slider( "option", < настройки >);
Устанавливает одну или несколько настроек
var option = $( ".selector" ).slider("option", "min");
Получает значение настройки
var option = $( ".selector" ).data().uiSlider.options;
Получает значения всех настроек, например: option.min, option.max и т.д.
$( ".selector" ).slider( "value", 20 );
Устанавливает нужное значение для рукоятки
var selection = $( ".selector" ).slider( "value" );
Получает значение рукоятки
$( ".selector" ).slider( "values", [ 55, 105 ] );
Устанавливает нужные значение для рукояток
$( ".selector" ).slider( "values", [ 0, 105 ] );
Устанавливает нужное значение для рукоятки 0
var values = $( ".selector" ).slider( "values" );
Получает значения рукояток
4. События
change ( event, ui )
Событие, которое происходит при изменении значения ползунка
create ( event, ui )
Событие, которое запускается при создании ползунка
slide ( event, ui )
Событие, которое происходит на каждое движении мыши, при перетаскивании рукоятки ползунка. ui.value представляет текущее значение ползунка.
start ( event, ui )
Событие, которое происходит, когда пользователь начинает перетаскивать рукоятку ползунка
stop ( event, ui )
Событие, которое происходит, когда пользователь заканчивает перетаскивать рукоятку ползунка
5. Вывод значений ползунка
Данный слайдер не имеет смысла, если пользователь не будет видеть данные, которые он им вводит. Для этого выведем на экран эти значения:
Значение ползунка:
Для слайдера из 2-х рукояток:
Значение ползунка:
6. Добавление значений к форме
Очень часто бывает, что данные такого слайдера нужно передать в форму, а не просто показывать на экране. Все делается аналогично выводу на экран, только данные подставляются в скрытое поле input
Значение ползунка:
7. Оформление
Чтобы придать ползунку другой вид, нужно добавить свой стиль ниже оригинального jquery-ui.css (как в примере) или редактировать оригинальный
Другие способы оформления можно поглядеть в отдельной статье: Варианты оформления jQuery UI Slider
8. Описание классов
Ниже представлена таблица с классами слайдера и за что отвечает каждый из них
| Класс | Описание |
|---|---|
| .ui-slider | дорожка слайдера |
| .ui-slider-horizontal | стили для горизонтального слайдера |
| .ui-slider-vertical | стили для вертикального слайдера |
| .ui-slider-handle | стили для рукоятки |
| .ui-slider-range | стили для выбранного диапазона |
| .ui-slider-range-min | стили для выбранного диапазона с настройкой range: "min" |
| .ui-slider-range-max | стили для выбранного диапазона с настройкой range: "max" |
| .ui-state-disabled | стили для заблокированного слайдера (disabled: true) |
Смотрите также:
Радиокнопки с иконками
Стилизация переключателей radio с использованием иконочных шрифтов или картинок
Оформление ползунка input type="range"
Оформление ползунка input type="range", вывод его значения и линейки с диапазоном.
3D слайдер-карусель
Адаптивный 3D слайдер-карусель с 3-мя видимыми фотографиями
Добавить комментарий:
Комментарии:
Я тут закономерности никакй не увидел, руками только подставлять значения значения.
Тут value - значение по умолчанию, на котором стоит ползунок.
И скрипт:
Я вам премного благодарен за помощь ! Всё получилось идеально ! Спасибо огромное !
Подскажите как один ползунок заставить двигаться другой ползунок синхронно ( в ползунках значения разные ) ?
Через события и методы, например, когда у нас двигается ползунок, происходит событие slide , через ui.value получаем его значение.
Далее обрабатываем это значение как нам нужно и передаем в другой ползунок
$( ".selector" ).slider( "value",значение );
Мне значения менять не нужно в ползунках , нужно просто когда я передвигаю первый за ним передвигался и второй.
Спасибо вам огромное ! Всё получилось ! И последний маленький вопрос . Как отобразить в подсказке над handle свои значения , а не значения бегунка. Данные для подсказки нужны такие min:13, max:24. Данные в slider min:1, max:12
Как в пункте 5 -Вывод значения ползунка, только прибавьте к выводимому значению 12
Александр , спасибо вам большое ещё раз ! С вашей помощью начал потихоньку разбираться и вникать в суть вопроса )))
Итого на вашем сайте ради 1 ползунка будет подключена 2 библиотеки и 1 плагин.
А еще столько же будет на слайдере, модальных окнах и других элементах.
Это к вопросу о быстродействии сайтов
Как сделать чтобы ползунок с диапазоном увеличивался логарифмически или разделить на 2 части и более (например): в 1 части значения 10 — 1000 и шаг 10, во 2 части 1000 — 100 000 шаг 1000?
Сделать 2 ползунка 🙂
Или пробывать через события, что если значение больше 1000, то меняем шаг.
Спасибо за ответ. В итоге noUiSlider все решает 😉
Как сделать, чтобы при вводе в input минимального и максимального значения изменялось положение ползунка? При этом, если ввести min > max, то они менялись местами
Есть в ползунка и их вывод, как их объединить в один вывод?
Есть 2* ползунка
А зачем их объединять в 1 вывод?
Если они полностью идентичны, можно привязать слайдер к классу, а не к айди.
Привет! Спасибо за статью! Работает во всех браузерах , кроме IE11. Это важно, так как задача стоит адаптировать сайт под все браузеры, и под IE11 в том числе (будь он неладен). Подскажи, плиз, как это сделать?
Да вроде как сладер этот поддерживается IE11, но проверить не могу, у меня его нет.
У вас неплохой сайт) Спасибо за информацию,как разработчик/чуток дизайнер могу выразить свою благодарность за внимание к мелочам(анимашки и переходы на js-сине) 🙂
Приветствую всех.
Помоги с решением моей микро задачи )))
Есть вертикальный слайдер, есть min и max — 0 и 100.
Задача, сделать чтобы ползунок никогда не доходит до своего минимума и максимума, а останавливался допустим на значениях 5 и 95 и на полосе прокрутки при максимальных и минимальных значения всегда оставались маленькие "хвостики"
Это реально сделать?
Если min стоит 0, то он и будет идти на 0, если нужно 5 минимальное, то нужно поставить 5. Соотв. и max тоже.
А чтобы хвостик оставался можно сделать псевдо шкалу, которую можно растянуть и оформить как угодно.
Псевдо шкала? А как её сделать? В двух словах ))
Шкала слайдера прозрачная, а под ней альтернативная, нужного размера и оформления.
Спасибо за идею, сделал ))
И тут же вопросик возник ), при адаптации только у меня не работает ползунок, двигать можно только нажатием на линию скроллинга?
Это на тачпадах? Для етого патч есть
Мне нужно, чтобы пользователь мог сам выставлять максимальное значение для ползунка. Подскажите, пожалуйста, как это осуществить.
А нужкн ли для такой задачи вообще ползунок?
Он как бы изначально же подразумевает значение ОТ и ДО
А у нас это значение не известно, оно может быть и 5 и 5 000 000.
Тут, как мне кажется, нужно просто сделать поле для ввода этого значения.
Пдскажите, как использовать несколько слайдеров на одной странице?
В таком варианте не работает
У вас во втором слайдере перепутаны значения max и min в его настройках
Статья весьма крутая! Мне нужна подсказка, как сделать один ползунок при передвижении которого меняется два разных значения?
Читайте также: